/* ========================================
         RESET
      ======================================== */

      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      html {
        scroll-behavior: smooth;
      }

      body {
        min-height: 100vh;

        font-family:
          Inter,
          -apple-system,
          BlinkMacSystemFont,
          "Segoe UI",
          sans-serif;

        color: var(--theme-text);

        background:
          radial-gradient(
            circle at 8% 5%,
            var(--theme-glow),
            transparent 28%
          ),
          radial-gradient(
            circle at 92% 80%,
            var(--theme-accent-faint),
            transparent 30%
          ),
          var(--theme-bg);
      }

      button {
        font: inherit;
      }

      a {
        color: inherit;
        text-decoration: none;
      }

      /* ========================================
         PAGE
      ======================================== */

      .creations-page {
        width: min(1200px, 92%);
        margin: auto;
        padding: 85px 0 110px;
      }

      /* ========================================
         HEADER
      ======================================== */

      .creations-header {
        max-width: 760px;
        margin: 0 auto 55px;
        text-align: center;
      }

      .header-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;

        padding: 8px 14px;
        margin-bottom: 20px;

        border: 1px solid var(--theme-glow);
        border-radius: 999px;

        background: var(--theme-surface);
        backdrop-filter: blur(15px);

        color: var(--theme-accent);

        font-size: 10px;
        font-weight: 800;
        letter-spacing: 1.3px;
      }

      .creations-header h1 {
        margin-bottom: 17px;

        font-size: clamp(45px, 7vw, 75px);
        line-height: 0.98;

        letter-spacing: -4px;
      }

      .creations-header h1 span {
        color: var(--theme-accent);
      }

      .creations-header p {
        max-width: 650px;
        margin: auto;

        color: var(--theme-muted);

        font-size: 15px;
        line-height: 1.75;
      }

      /* ========================================
         FILTERS
      ======================================== */

      .creation-filters {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;

        gap: 8px;

        margin-bottom: 30px;
      }

      .filter-btn {
        cursor: pointer;

        padding: 9px 15px;

        border: 1px solid var(--theme-border);
        border-radius: 999px;

        background: var(--theme-surface);

        color: var(--theme-muted);

        font-size: 11px;
        font-weight: 700;

        transition: 0.25s ease;
      }

      .filter-btn:hover,
      .filter-btn.active {
        border-color: var(--theme-glow);

        background: var(--theme-accent);

        color: var(--theme-accent-contrast);

        box-shadow:
          0 8px 22px var(--theme-glow);
      }

      /* ========================================
         CREATION GRID
      ======================================== */

      .creations-grid {
        display: grid;

        grid-template-columns:
          repeat(3, minmax(0, 1fr));

        gap: 18px;
      }

      /* ========================================
         CREATION CARD
      ======================================== */

      .creation-card {
        position: relative;

        display: flex;
        flex-direction: column;

        min-height: 365px;

        overflow: hidden;

        border: 1px solid var(--theme-border);
        border-radius: 25px;

        background:
          linear-gradient(
            145deg,
            var(--theme-surface-strong),
            var(--theme-surface-muted)
          );

        backdrop-filter: blur(20px);

        cursor: pointer;

        transition:
          transform 0.3s ease,
          border-color 0.3s ease,
          box-shadow 0.3s ease;
      }

      .creation-card:hover {
        transform: translateY(-7px);

        border-color: var(--theme-accent-medium);

        box-shadow:
          0 25px 55px var(--theme-shadow-soft);
      }

      /* ========================================
         CREATION IMAGE
      ======================================== */

      .creation-image {
        position: relative;

        height: 190px;

        overflow: hidden;

        background:
          linear-gradient(
            135deg,
            var(--theme-surface-muted),
            var(--theme-bg)
          );
      }

      .creation-image img {
        width: 100%;
        height: 100%;

        object-fit: cover;

        display: block;

        transition:
          transform 0.45s ease;
      }

      .creation-card:hover .creation-image img {
        transform: scale(1.05);
      }

      /* Image fallback */

      .creation-placeholder {
        width: 100%;
        height: 100%;

        display: flex;
        align-items: center;
        justify-content: center;

        background:
          radial-gradient(
            circle,
            var(--theme-glow),
            transparent 55%
          );

        color: var(--theme-accent);

        font-size: 45px;
      }

      /* ========================================
         STATUS BADGES
      ======================================== */

      .creation-status {
        position: absolute;

        top: 14px;
        left: 14px;

        z-index: 5;

        display: none;

        align-items: center;
        gap: 6px;

        padding: 7px 10px;

        border-radius: 999px;

        font-size: 9px;
        font-weight: 800;

        letter-spacing: 0.7px;

        backdrop-filter: blur(12px);
      }

      /* Automatically show badge */

      .creation-card.private .creation-status.private-badge {
        display: flex;

        background: rgba(15, 23, 42, 0.82);

        color: var(--theme-accent-contrast);
      }

      .creation-card.public .creation-status.public-badge {
        display: flex;

        background: rgba(34, 197, 94, 0.88);

        color: var(--theme-accent-contrast);
      }

      /* ========================================
         TYPE
      ======================================== */

      .creation-type {
        position: absolute;

        right: 14px;
        top: 14px;

        z-index: 5;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 38px;
        height: 38px;

        border: 1px solid var(--theme-border-strong);
        border-radius: 12px;

        background: var(--theme-surface-strong);

        backdrop-filter: blur(12px);

        color: var(--theme-accent);

        font-size: 16px;
      }

      /* ========================================
         CARD CONTENT
      ======================================== */

      .creation-content {
        display: flex;
        flex-direction: column;

        flex: 1;

        padding: 22px;
      }

      .creation-category {
        margin-bottom: 8px;

        color: var(--theme-accent);

        font-size: 9px;
        font-weight: 800;

        letter-spacing: 1.2px;
      }

      .creation-content h2 {
        margin-bottom: 8px;

        font-size: 21px;
        line-height: 1.2;

        letter-spacing: -0.5px;
      }

      .creation-content p {
        display: -webkit-box;

        overflow: hidden;

        margin-bottom: 18px;

        color: var(--theme-muted);

        font-size: 12px;
        line-height: 1.7;

        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
      }

      /* ========================================
         CARD FOOTER
      ======================================== */

      .creation-footer {
        display: flex;
        align-items: center;

        gap: 8px;

        margin-top: auto;
      }

      .view-project {
        display: inline-flex;
        align-items: center;
        gap: 7px;

        padding: 9px 12px;

        border-radius: 10px;

        background: var(--theme-accent-faint);

        color: var(--theme-accent);

        font-size: 10px;
        font-weight: 800;

        transition: 0.25s ease;
      }

      .creation-card:hover .view-project {
        background: var(--theme-accent);

        color: var(--theme-accent-contrast);
      }

      .link-icons {
        display: flex;
        align-items: center;

        gap: 6px;

        margin-left: auto;
      }

      .link-icon {
        width: 31px;
        height: 31px;

        display: flex;
        align-items: center;
        justify-content: center;

        border: 1px solid var(--theme-border);
        border-radius: 9px;

        background: var(--theme-surface-muted);

        color: var(--theme-muted);

        font-size: 13px;

        transition: 0.25s ease;
      }

      .link-icon:hover {
        transform: translateY(-2px);

        background: var(--theme-accent);

        color: var(--theme-accent-contrast);
      }

      /* ========================================
         MODAL
      ======================================== */

      .modal-overlay {
        position: fixed;

        inset: 0;

        z-index: 1000;

        display: flex;
        align-items: center;
        justify-content: center;

        padding: 20px;

        background: color-mix(in srgb, var(--theme-text) 55%, transparent);

        backdrop-filter: blur(12px);

        opacity: 0;
        visibility: hidden;

        transition: 0.25s ease;
      }

      .modal-overlay.active {
        opacity: 1;
        visibility: visible;
      }

      .creation-modal {
        position: relative;

        width: min(700px, 100%);
        max-height: 90vh;

        overflow-y: auto;

        padding: 30px;

        border: 1px solid var(--theme-border-strong);
        border-radius: 27px;

        background: var(--theme-surface-strong);

        box-shadow: var(--theme-shadow);

        transform: translateY(20px) scale(0.97);

        transition: 0.3s ease;
      }

      .modal-overlay.active .creation-modal {
        transform: translateY(0) scale(1);
      }

      .modal-close {
        position: absolute;

        right: 18px;
        top: 18px;

        width: 38px;
        height: 38px;

        display: flex;
        align-items: center;
        justify-content: center;

        border: 0;
        border-radius: 11px;

        background: var(--theme-surface-muted);

        color: var(--theme-muted);

        cursor: pointer;

        transition: 0.2s ease;
      }

      .modal-close:hover {
        background: var(--theme-text);
        color: var(--theme-accent-contrast);
      }

      .modal-image {
        width: 100%;
        height: 230px;

        overflow: hidden;

        margin-bottom: 25px;

        border-radius: 19px;

        background: var(--theme-surface-muted);
      }

      .modal-image img {
        width: 100%;
        height: 100%;

        object-fit: cover;
      }

      .modal-category {
        margin-bottom: 8px;

        color: var(--theme-accent);

        font-size: 9px;
        font-weight: 800;

        letter-spacing: 1.2px;
      }

      .creation-modal h2 {
        margin-bottom: 13px;

        font-size: clamp(27px, 5vw, 38px);

        letter-spacing: -1.3px;
      }

      .modal-description {
        color: var(--theme-muted);

        font-size: 14px;

        line-height: 1.85;
      }

      /* ========================================
         MODAL LINKS
      ======================================== */

      .modal-links-title {
        margin: 27px 0 12px;

        color: var(--theme-text);

        font-size: 11px;
        font-weight: 800;

        letter-spacing: 0.9px;
      }

      .modal-links {
        display: flex;
        flex-wrap: wrap;

        gap: 9px;
      }

      .modal-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;

        padding: 11px 14px;

        border: 1px solid var(--theme-border);
        border-radius: 12px;

        background: var(--theme-bg);

        color: var(--theme-muted-strong);

        font-size: 11px;
        font-weight: 700;

        transition: 0.2s ease;
      }

      .modal-link:hover {
        border-color: var(--theme-accent-medium);

        background: var(--theme-accent);

        color: var(--theme-accent-contrast);

        transform: translateY(-2px);
      }

      /* ========================================
         EMPTY STATE
      ======================================== */

      .empty-state {
        display: none;

        grid-column: 1 / -1;

        padding: 60px 20px;

        text-align: center;

        color: var(--theme-muted);
      }

      .empty-state i {
        margin-bottom: 15px;

        font-size: 30px;
      }

      /* ========================================
         TABLET
      ======================================== */

      @media (max-width: 950px) {
        .creations-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }

      /* ========================================
         MOBILE
      ======================================== */

      @media (max-width: 620px) {
        .creations-page {
          width: 94%;

          padding: 55px 0 75px;
        }

        .creations-header {
          margin-bottom: 38px;
        }

        .creations-header h1 {
          font-size: clamp(43px, 14vw, 60px);

          letter-spacing: -2.5px;
        }

        .creations-header p {
          font-size: 13px;
        }

        .creations-grid {
          grid-template-columns: 1fr;

          gap: 15px;
        }

        .creation-card {
          min-height: 350px;
        }

        .creation-image {
          height: 200px;
        }

        .creation-modal {
          padding: 21px;

          border-radius: 22px;
        }

        .modal-image {
          height: 180px;
        }

        .modal-description {
          font-size: 13px;
        }
      }

      @media (max-width: 380px) {
        .creation-footer {
          gap: 5px;
        }

        .link-icon {
          width: 28px;
          height: 28px;

          font-size: 11px;
        }

        .view-project {
          padding: 8px 9px;
        }
      }

      /* ========================================
         REDUCED MOTION
      ======================================== */

      @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
          transition: none !important;
          animation: none !important;
        }
      }

      .creations-page {
        position: relative;
        isolation: isolate;
      }

      .creations-page::before,
      .creations-page::after {
        position: fixed;
        pointer-events: none;
        content: "";
        z-index: -1;
      }

      .creations-page::before {
        inset: 0;
        background-image: linear-gradient(var(--theme-grid) 1px, transparent 1px), linear-gradient(90deg, var(--theme-grid) 1px, transparent 1px);
        background-size: 80px 80px;
        mask-image: linear-gradient(to bottom, black, transparent 80%);
        transform: translate3d(var(--ambient-x, 0px), var(--ambient-y, 0px), 0);
      }

      .creations-page::after {
        width: 360px;
        height: 360px;
        top: 8vh;
        right: -130px;
        border-radius: 50%;
        background: radial-gradient(circle, color-mix(in srgb, var(--theme-accent-soft) 20%, transparent), transparent 70%);
        filter: blur(22px);
        transform: translate3d(var(--ambient-x, 0px), var(--ambient-y, 0px), 0);
      }

      .creations-header,
      .creation-filters,
      .creation-card {
        --entrance-index: 0;
      }

      .depth-entrance {
        opacity: 0;
        transform: translate3d(0, 30px, 0) scale(.97);
        transition: opacity .8s cubic-bezier(.22, .61, .36, 1), transform .8s cubic-bezier(.22, .61, .36, 1);
        transition-delay: var(--entrance-delay, 0ms);
      }

      .depth-entrance.depth-visible {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
      }

      .filter-emerge {
        animation: filter-emerge .65s cubic-bezier(.22, .61, .36, 1) both;
      }

      @keyframes filter-emerge {
        from { opacity: .35; transform: translateY(14px) scale(.985); }
        to { opacity: 1; transform: translateY(0) scale(1); }
      }

      @media (hover: hover) and (pointer: fine) {
        .creation-card {
          --tilt-x: 0deg;
          --tilt-y: 0deg;
          --glow-x: 50%;
          --glow-y: 50%;
          --card-lift: 0px;
          --shadow-x: 0px;
          --shadow-y: 20px;
          transform: perspective(1000px) translate3d(0, var(--card-lift), 0) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
          transform-style: preserve-3d;
          will-change: transform;
          box-shadow: var(--shadow-x) var(--shadow-y) 42px var(--theme-shadow-soft);
        }

        .creation-card:hover {
          --card-lift: -7px;
        }

        .creation-card::after {
          position: absolute;
          inset: 0;
          z-index: 4;
          pointer-events: none;
          content: "";
          border-radius: inherit;
          background: radial-gradient(circle at var(--glow-x) var(--glow-y), color-mix(in srgb, var(--theme-accent) 18%, transparent), transparent 38%);
          opacity: 0;
          transition: opacity .35s ease;
        }

        .creation-card.interaction-active::after {
          opacity: 1;
        }

        .creation-card .creation-image img {
          transform: translate3d(var(--image-shift-x, 0px), var(--image-shift-y, 0px), 0) scale(1.03);
          transition: transform .5s cubic-bezier(.22, .61, .36, 1);
        }

        .creation-card:hover .creation-image img {
          transform: translate3d(var(--image-shift-x, 0px), var(--image-shift-y, 0px), 0) scale(1.08);
        }

        .creation-content {
          transform: translate3d(var(--content-shift-x, 0px), var(--content-shift-y, 0px), 18px);
          transition: transform .5s cubic-bezier(.22, .61, .36, 1);
        }

        .creation-status {
          transform: translateZ(28px);
        }

        .creation-card .creation-image {
          transform: translateZ(8px);
          transform-style: preserve-3d;
        }
      }

      @media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
        .creations-page::before,
        .creations-page::after {
          transform: none;
        }

        .depth-entrance {
          opacity: 1;
          transform: none;
          transition: none;
        }

        .filter-emerge {
          animation: none;
        }

        .creation-card {
          box-shadow: 0 14px 32px var(--theme-shadow-soft);
        }
      }