/* ── Reset ──────────────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --card-w:    clamp(190px, 21vw, 320px);
      --card-h:    calc(var(--card-w) * 0.65);
      --accent:    #c8a96e;
      --text-main: rgba(220, 228, 245, 0.92);
      --text-dim:  rgba(200, 210, 230, 0.38);
    }

    html, body {
      width: 100%;
      overflow-x: hidden;
      background: #05080f;
    }

    /* ── Hero section: full viewport, clips everything ─────────── */
    #hero {
      position: relative;
      width: 100%;
      height: 100dvh;
      overflow: hidden;
      background: url('image/herobg.jpg') center bottom / cover no-repeat;
    }

    /* ── Starfield — sits above the bg image, behind ship/cards ──── */
    #starCanvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
    }

    /* ── Three.js canvas — ship renders here ────────────────────── */
    #shipCanvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 5;
    }

    /* ── Image stack wrapper — GSAP moves this on x-axis ─────────
       `left: 22%` is the FINAL resting position.
       During the intro the wrapper is offset rightward via GSAP x.    */
    #stackWrapper {
      position: absolute;
      top: 70%;
      left: 30%;
      transform: translateY(-50%);   /* vertical centering — do not remove */
      perspective: 1400px;
      perspective-origin: 55% 48%;
      z-index: 6;
      opacity: 0;                    /* hidden until intro reveals it */
    }

    .stack-origin {
      position: relative;
      transform-style: preserve-3d;
      width: var(--card-w);
      height: var(--card-h);
    }

    /* Individual card inside the stack */
    .depth-card {
      position: absolute;
      inset: 0;
      border-radius: 14px;
      overflow: hidden;
      will-change: transform, opacity, filter;
      backface-visibility: hidden;
      transform-origin: center center;
      transform: skew(0deg, -8deg);
      cursor: default;
      pointer-events: none;   /* only the front card is clickable — see .is-front */
    }

    /* Only the front-most card is a clean, exact click target */
    .depth-card.is-front {
      cursor: pointer;
      pointer-events: auto;
    }
    .depth-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      pointer-events: none;
      user-select: none;
    }

    /* ── Hero headline text ─────────────────────────────────────── */
    #heroText {
      position: absolute;
      top: 38%;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
      z-index: 10;
      opacity: 0;                    /* fades in at end of intro */
      pointer-events: none;
      width: max-content;
      max-width: 46vw;
      will-change: filter, transform, opacity;
    }
    #heroText .headline {
      font-family: 'BrandonGrotesque', sans-serif;
      font-size: 24px;
      font-weight: 300;
      letter-spacing: 0.20em;
      text-transform: uppercase;
      color: var(--text-main);
      line-height: 2.1;
    }

    /* ── Scroll hint ────────────────────────────────────────────── */
    #scrollHint {
      position: absolute;
      bottom: 28px;
      left: 50%;
      transform: translateX(-50%);
      font-family: 'BrandonGrotesque', sans-serif;
      font-size: 8px;
      letter-spacing: 0.32em;
      color: var(--text-dim);
      z-index: 10;
      opacity: 0;
    }
    /* Animated chevron under SCROLL text */
    #scrollHint::after {
      content: '';
      display: block;
      margin: 7px auto 0;
      width: 10px;
      height: 10px;
      border-right: 1px solid var(--text-dim);
      border-bottom: 1px solid var(--text-dim);
      transform: rotate(45deg);
      animation: chevronBounce 1.6s ease-in-out infinite;
    }
    @keyframes chevronBounce {
      0%, 100% { transform: rotate(45deg) translateY(0); opacity: 0.3; }
      50%       { transform: rotate(45deg) translateY(4px); opacity: 1; }
    }

    /* ── Loading overlay ────────────────────────────────────────── */
    #loader {
      position: fixed;
      inset: 0;
      background: #05080f;
      z-index: 200;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 20px;
    }
    #loader .loader-label {
      font-family: 'BrandonGrotesque', sans-serif;
      font-size: 9px;
      letter-spacing: 0.35em;
      color: var(--text-dim);
    }
    #loader .loader-bar-track {
      width: 160px;
      height: 1px;
      background: rgba(200,210,230,0.1);
    }
    #loader .loader-bar-fill {
      height: 100%;
      width: 0%;
      background: var(--accent);
      transition: width 0.2s ease;
    }

    /* ══════════════════════════════════════════════════════════════
       CARD MODAL  —  rotating stack click-to-expand interaction
       ══════════════════════════════════════════════════════════════ */

    /* ── Dark backdrop ────────────────────────────────────────────── */
    /* Sits behind the modal at z-index 900; fades in via GSAP        */
    #cardModalOverlay {
      position: fixed;
      inset: 0;
      background: rgba(5, 8, 15, 0.88);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      z-index: 900;
      opacity: 0;
      pointer-events: none;   /* enabled by JS when modal opens */
    }

    /* ── Modal container ──────────────────────────────────────────── */
    /* Always full-viewport size in the DOM (position:fixed; inset:0) —
       GSAP animates its transform (translate/scale/skew) + border-radius
       between the source card's exact pose and identity/flat/fullscreen,
       a FLIP-style open/close. Width/height never animate. */
    #cardModal {
      display: none;                /* toggled by GSAP                */
      position: fixed;
      inset: 0;
      z-index: 910;
      background: #0a0f1e;
      overflow: hidden;
      will-change: transform, border-radius;
    }

    /* ── Background image ─────────────────────────────────────────── */
    /* object-fit: cover matches the card's crop — seamless transition */
    #cardModal .modal-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      user-select: none;
      pointer-events: none;
    }

    /* ── Image gradient ───────────────────────────────────────────── */
    /* Fades image to dark so body text is readable                   */
    #cardModal .modal-gradient {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        160deg,
        rgba(5,  8,  15, 0.05) 0%,
        rgba(5,  8,  15, 0.25) 28%,
        rgba(10, 15, 30, 0.80) 55%,
        rgba(10, 15, 30, 0.97) 74%,
        rgba(10, 15, 30, 1.00) 100%
      );
      pointer-events: none;
    }

    /* ── Text content block ───────────────────────────────────────── */
    /* Positioned at the bottom-left; GSAP fades + slides it in       */
    #cardModal .modal-content {
      position: absolute;
      left:   clamp(32px, 6vw, 100px);
      right:  clamp(32px, 6vw, 100px);
      bottom: clamp(40px, 7vh, 90px);
      opacity: 0;   /* GSAP animates this once expansion finishes     */
    }

    /* Category label — e.g. "Web Design" */
    #cardModal .modal-tag {
      display: block;
      font-family: 'BrandonGrotesque', sans-serif;
      font-size: clamp(7px, 0.6vw, 10px);
      letter-spacing: 0.38em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 16px;
    }

    /* Main heading */
    #cardModal .modal-title {
      font-family: 'BrandonGrotesque', sans-serif;
      font-size: clamp(28px, 4.5vw, 68px);
      font-weight: 300;
      color: var(--text-main);
      line-height: 1.1;
      margin-bottom: 18px;
    }

    /* Description paragraph */
    #cardModal .modal-body {
      font-family: 'BrandonGrotesque', sans-serif;
      font-size: clamp(14px, 1.2vw, 20px);
      color: rgba(220, 228, 245, 0.60);
      line-height: 1.78;
      max-width: 560px;
      margin-bottom: 28px;
    }

    /* CTA — styled as an underline text-link; wire up href as needed */
    #cardModal .modal-cta {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-family: 'BrandonGrotesque', sans-serif;
      font-size: clamp(7px, 0.6vw, 9px);
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--accent);
      background: none;
      border: none;
      border-bottom: 1px solid rgba(200, 169, 110, 0.30);
      padding: 0 0 6px 0;
      cursor: pointer;
      transition: border-color 0.25s ease, color 0.25s ease;
    }
    #cardModal .modal-cta:hover {
      border-color: var(--accent);
      color: #e0c484;
    }
    /* Arrow slides right on hover */
    #cardModal .modal-cta::after {
      content: '→';
      display: inline-block;
      transition: transform 0.25s ease;
    }
    #cardModal .modal-cta:hover::after { transform: translateX(5px); }

    /* ── Close button ─────────────────────────────────────────────── */
    /* Circular pill — appears only after the expansion completes      */
    #cardModal .modal-close {
      position: absolute;
      top:   clamp(16px, 2.5vw, 32px);
      right: clamp(16px, 2.5vw, 32px);
      width:  46px;
      height: 46px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(220, 228, 245, 0.16);
      border-radius: 50%;
      background: rgba(5, 8, 15, 0.55);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      cursor: pointer;
      opacity: 0;             /* GSAP fades this in after modal opens */
      pointer-events: none;   /* enabled by JS after open completes  */
      transition: border-color 0.2s ease, background 0.2s ease;
      z-index: 5;
    }
    #cardModal .modal-close:hover {
      border-color: rgba(200, 169, 110, 0.45);
      background: rgba(200, 169, 110, 0.08);
    }
    #cardModal .modal-close svg {
      width: 14px;
      height: 14px;
      stroke: var(--text-main);
      stroke-width: 1.5;
      fill: none;
      pointer-events: none;
    }

    /* ── Content below hero (demonstrates scroll behavior) ───────── */
    #nextSection {
      height: 100vh;
      background: #05080f;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'BrandonGrotesque', sans-serif;
      font-size: 10px;
      letter-spacing: 0.22em;
      color: var(--text-dim);
    }