:root{ --accent:#253868; }
  *{margin:0;padding:0;box-sizing:border-box;}
  html,body{
    height:100%;overflow:hidden;font-family:'Helvetica Neue',Arial,sans-serif;color:#fff;background:#000;
    -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
  }
  #stage{
    position:fixed;inset:0;
    background:linear-gradient(180deg,
       color-mix(in srgb, var(--accent) 92%, #fff) 0%,
       var(--accent) 45%,
       color-mix(in srgb, var(--accent) 88%, #000) 100%);
    transition:background 1.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    perspective:1800px;
  }
  .brand{
    position:fixed;top:45px;left:0;right:0;text-align:center;z-index:50;pointer-events:none;
    animation:brandSlide 1s cubic-bezier(0.4, 0.0, 0.2, 1) backwards;
  }
  @keyframes brandSlide{
    from{opacity:0;transform:translateY(-40px);}
    to{opacity:1;transform:translateY(0);}
  }
  .brand .logo-img{display:block;margin:0 auto;width:189px;height:auto;mix-blend-mode:difference;}
  .brand .sub-img{display:block;margin:36px auto 0;width:300px;height:auto;mix-blend-mode:difference;}


  .track{
    position:relative;width:100%;height:64vh;transform-style:preserve-3d;
  }
  /* PC: nudge down 15px and expand card height by 10px anchored at top */
  @media (min-width:768px){
    .track{
      transform:translateY(15px)
               rotateX(var(--tiltX,0deg))
               rotateY(var(--tiltY,0deg));
      transition:transform .25s cubic-bezier(0.22,1,0.36,1);
      will-change:transform;
    }
    .card{
      top:calc(50% - 5px);
      max-height:calc(72vh + 10px);
    }
  }
  .card{
    position:absolute;top:50%;left:50%;
    width:clamp(180px,24vw,480px);
    aspect-ratio:787/1400;
    max-height:72vh;
    border-radius:14px;overflow:hidden;
    transform:translate(-50%,-50%);
    transition:transform 1.15s cubic-bezier(0.33, 1, 0.68, 1), 
               opacity 1.15s cubic-bezier(0.4, 0.0, 0.2, 1), 
               filter 1.15s cubic-bezier(0.4, 0.0, 0.2, 1);
    box-shadow:
      0 0 0 1px rgba(0,0,0,.01),
      0 10px 24px rgba(0,0,0,.04),
      0 28px 70px rgba(0,0,0,.05),
      0 56px 120px rgba(0,0,0,.06);
    cursor:pointer;background:#0d0d0d;
    animation:cardAppear 1s cubic-bezier(0.4, 0.0, 0.2, 1) backwards;
  }
  /* only the active card gets promoted to its own GPU layer */
  .card.active{will-change:transform;}
  /* hover lift (PC): snappier motion + deeper shadow so the card feels raised */
  .card.lifted{
    transition:transform .35s cubic-bezier(0.22,1,0.36,1),
               box-shadow .35s ease,
               filter .35s ease;
    box-shadow:
      0 0 0 1px rgba(0,0,0,.02),
      0 20px 40px rgba(0,0,0,.12),
      0 44px 100px rgba(0,0,0,.16),
      0 80px 160px rgba(0,0,0,.18);
  }
  @keyframes cardAppear{
    from{opacity:0;}
    to{opacity:1;}
  }
  /* intro sweep: fast, snappy transition so cards visibly stream past.
     filter is NOT animated here (too heavy across many cards on mobile). */
  #stage.intro .card{
    transition:transform .28s linear,
               opacity .28s linear !important;
    animation:none !important;
    filter:none !important;
  }
  .card img{width:100%;height:100%;object-fit:cover;display:block;}
  .card video{width:100%;height:100%;object-fit:cover;display:block;background:#1b1b20;}
  /* poster-like overlay shown until the video can actually play */
  .card .vload{
    position:absolute;inset:0;display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    background:#1b1b20;z-index:5;
    transition:opacity .6s ease;
  }
  .card .vload.hidden{opacity:0;pointer-events:none;}
  .card .vload img{
    width:100%;height:100%;object-fit:cover;display:block;
  }
  .card .bar{position:absolute;left:0;right:0;bottom:0;height:8px;}
  .card .num{
    position:absolute;top:14px;left:14px;font-size:11px;letter-spacing:2.2px;
    padding:5px 11px;border-radius:24px;
    backdrop-filter:blur(10px) saturate(140%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
    opacity:0;transition:opacity .48s cubic-bezier(0.4, 0.0, 0.2, 1);
  }
  .card.active .num{opacity:1;}
  .card.active{
    outline:none;
    box-shadow:
      0 0 0 1px rgba(0,0,0,.03),
      0 12px 32px rgba(0,0,0,.06),
      0 36px 90px rgba(0,0,0,.08),
      0 72px 160px rgba(0,0,0,.10);
  }

  /* controls */
  .nav{
    position:fixed;bottom:74px;left:0;right:0;display:flex;gap:28px;justify-content:center;z-index:50;
    animation:navSlide 1s cubic-bezier(0.4, 0.0, 0.2, 1) 0.4s backwards;
  }
  @keyframes navSlide{
    from{opacity:0;transform:translateY(40px);}
    to{opacity:1;transform:translateY(0);}
  }
  .nav button{
    width:54px;height:54px;border-radius:50%;border:1.5px solid rgba(0,0,0,.32);
    background:rgba(0,0,0,.18);color:#fff;font-size:20px;cursor:pointer;
    transition:all .32s cubic-bezier(0.4, 0.0, 0.2, 1);
    backdrop-filter:blur(10px) saturate(120%);
    box-shadow:0 4px 16px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.12);
  }
  .nav button:hover{
    background:rgba(0,0,0,.45);border-color:rgba(0,0,0,.6);transform:scale(1.12);
    box-shadow:0 6px 24px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.2);
  }
  .meta{
    position:fixed;bottom:30px;left:0;right:0;text-align:center;z-index:50;
    font-size:12px;letter-spacing:3.2px;color:rgba(255,255,255,.75);
    animation:navSlide 1s cubic-bezier(0.4, 0.0, 0.2, 1) 0.5s backwards;
  }

  /* ============ MOBILE (SP) ============ */
  @media (max-width:767px){
    .brand{top:28px;}
    .brand .logo-img{width:132px;}
    .brand .sub-img{width:200px;margin:22px auto 0;}

    /* larger, dominant central card on mobile — nudged up to clear the nav/meta */
    .track{transform:translateY(-30px);}
    .card{
      width:min(76vw,310px);
      max-height:64vh;
      overflow:visible;
    }
    .card img{border-radius:14px;}
    .card .num{top:-10px;left:-10px;font-size:10px;padding:4px 9px;}

    .nav{bottom:64px;gap:22px;}
    .nav button{width:48px;height:48px;font-size:18px;}
    .meta{bottom:26px;font-size:11px;letter-spacing:2.6px;}
  }