@import url('https://fonts.googleapis.com/css2?family=Syne:wght@500;700;800&family=DM+Sans:wght@300;400;500&display=swap');

  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  :root{
    --pink:#f0b3ec;
    --pink-d:#f68cdc;
    --pink-deep:#3a2533;
    --bg-1:#ff75f1;
    --bg-2:#ff75f1;
    --ink:#1f1812;
    --display:'Space Grotesk','Helvetica Neue',Arial,sans-serif;
  }
  html,body{
    height:100%;width:100%;overflow:hidden;
    font-family:'DM Sans',sans-serif;color:var(--ink);
 
    user-select:none; -webkit-user-select:none;
  }

  /* animated soft orbs */


  header{
    position:fixed;top:0;left:0;right:0;z-index:50;
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 26px;
    background:linear-gradient(to bottom,rgba(255,255,255,.85),rgba(255,255,255,.4) 70%,transparent);
    backdrop-filter:blur(18px);
  }
  .logo{font-family:'Syne';font-weight:800;letter-spacing:-.5px;font-size:22px;color:var(--pink-deep)}
  .logo span{color:var(--pink-d)}
  .meta{font-size:12px;color:#6b5a47;letter-spacing:.04em}
  .meta strong{color:var(--pink-deep);font-weight:600}

  /* main stage */
  main{
    position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
    perspective:2200px;perspective-origin:50% 55%;
    z-index:1;
  }

  .stage{
    position:relative;width:100%;height:100%;
    transform-style:preserve-3d;
  }

  /* each page card sits absolute, JS positions/rotates */
  .card{
    position:absolute;left:50%;top:50%;
    transform-origin:center center;
    border-radius:10px;overflow:hidden;
    background:#fff;
    box-shadow:
      0 30px 60px -20px rgba(58,47,37,.35),
      0 18px 30px -12px rgba(58,47,37,.25),
      0 2px 6px rgba(0,0,0,.08);
    transition:transform .9s cubic-bezier(.22,.61,.36,1),
               opacity .6s cubic-bezier(.22,.61,.36,1),
               filter .6s ease,
               box-shadow .6s ease;
    will-change:transform,opacity,filter;
    cursor:pointer;
    backface-visibility:hidden;
  }
  .card.center{cursor:zoom-in;box-shadow:
      0 50px 90px -20px rgba(58,47,37,.45),
      0 20px 40px -10px rgba(58,47,37,.3),
      0 0 0 1px rgba(255,255,255,.6) inset}
  .card img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
  .card .pn{
    position:absolute;left:14px;bottom:10px;
    font-family:'Syne';font-weight:700;font-size:11px;letter-spacing:.15em;
    color:rgba(58,47,37,.55);text-transform:uppercase;
  }
  .card .glow{
    position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);
    opacity:0;transition:opacity .5s;
  }
  .card.center .glow{opacity:.35}

  /* zoomed lightbox */
  .lightbox{
    position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;
    background:radial-gradient(circle at center, rgba(58,47,37,.45), rgba(20,15,10,.85));
    backdrop-filter:blur(8px);
    cursor:zoom-out;
    animation:fadeIn .35s ease;
  }
  .lightbox.open{display:flex}
  .lightbox img{
    max-width:94vw;max-height:88vh;object-fit:contain;border-radius:8px;
    box-shadow:0 30px 80px rgba(0,0,0,.5);
    animation:zoomIn .5s cubic-bezier(.22,.61,.36,1);
  }
  @keyframes fadeIn{from{opacity:0}to{opacity:1}}
  @keyframes zoomIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}

  /* footer controls */
  footer{
    position:fixed;left:0;right:0;bottom:0;z-index:50;
    padding:18px 24px 22px;
    display:flex;flex-direction:column;align-items:center;gap:12px;
    background:linear-gradient(to top,rgba(255,255,255,.9),rgba(255,255,255,.4) 70%,transparent);
    backdrop-filter:blur(18px);
  }
  .controls{display:flex;align-items:center;gap:14px}
  .btn{
    width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;
    background:linear-gradient(135deg,#fff,#f4ece0);
    color:var(--pink-deep);
    box-shadow:0 8px 22px -6px rgba(138,115,85,.5),0 0 0 1px rgba(138,115,85,.18) inset;
    display:flex;align-items:center;justify-content:center;
    transition:transform .25s cubic-bezier(.22,.61,.36,1),box-shadow .25s, background .25s;
  }
  .btn:hover:not(:disabled){transform:translateY(-2px) scale(1.06);background:linear-gradient(135deg,#fff,#ebe0cd)}
  .btn:active:not(:disabled){transform:scale(.95)}
  .btn:disabled{opacity:.35;cursor:default}
  .btn svg{width:18px;height:18px}
  .btn.big{width:54px;height:54px;background:linear-gradient(135deg,var(--pink),var(--pink-d));color:#fff;
    box-shadow:0 14px 34px -8px rgba(138,115,85,.7),0 0 0 1px rgba(255,255,255,.4) inset}
  .btn.big:hover{background:linear-gradient(135deg,#d6b896,#76624a)}
  .label{font-family:'Syne';font-weight:700;font-size:13px;color:var(--pink-deep);min-width:120px;text-align:center;letter-spacing:.04em}
  /* scrubber */
  .scrub{position:relative;width:min(620px,80vw);height:6px;border-radius:99px;
    background:rgba(138,115,85,.18);cursor:pointer}
  .scrub .fill{position:absolute;left:0;top:0;bottom:0;border-radius:99px;
    background:linear-gradient(90deg,var(--pink),var(--pink-d));
    transition:width .6s cubic-bezier(.22,.61,.36,1);width:0}
  .scrub .knob{position:absolute;top:50%;width:14px;height:14px;border-radius:50%;
    background:#fff;border:2px solid var(--pink-d);transform:translate(-50%,-50%);
    box-shadow:0 4px 12px rgba(138,115,85,.5);
    transition:left .6s cubic-bezier(.22,.61,.36,1)}
  .ticks{display:flex;justify-content:space-between;width:min(620px,80vw);font-size:10px;
    color:rgba(58,47,37,.5);font-family:'DM Sans';letter-spacing:.08em;text-transform:uppercase}

  /* thumbnail grid overlay */
  .grid{
    position:fixed;inset:0;z-index:90;display:none;

    backdrop-filter:blur(20px);
    overflow:auto;padding:80px 40px 40px;
  }
  .grid.open{display:block;animation:fadeIn .35s ease}
  .grid h2{font-family:'Syne';font-weight:800;font-size:28px;color:var(--pink-deep);
    text-align:center;margin-bottom:24px;letter-spacing:-.5px}
  .grid h2 small{display:block;font-family:'DM Sans';font-size:12px;color:#6b5a47;font-weight:400;
    margin-top:4px;letter-spacing:.15em;text-transform:uppercase}
  .thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px;max-width:1400px;margin:0 auto}
  .thumb{position:relative;border-radius:8px;overflow:hidden;cursor:pointer;
    background:#fff;aspect-ratio:1.6/1;
    box-shadow:0 14px 30px -10px rgba(58,47,37,.3);
    transform:translateY(20px);opacity:0;
    transition:transform .4s cubic-bezier(.22,.61,.36,1),opacity .4s,box-shadow .3s;
  }
  .grid.open .thumb{transform:translateY(0);opacity:1}
  .thumb:hover{transform:translateY(-6px) scale(1.03);box-shadow:0 22px 40px -10px rgba(58,47,37,.45)}
  .thumb img{width:100%;height:100%;object-fit:cover;display:block}
  .thumb .badge{position:absolute;top:8px;left:8px;background:rgba(255,255,255,.92);
    color:var(--pink-deep);font-family:'Syne';font-size:11px;font-weight:700;
    padding:3px 8px;border-radius:99px}
  .thumb.active{outline:3px solid var(--pink-d);outline-offset:-3px}
  .grid .close{position:fixed;top:18px;right:24px;width:44px;height:44px;border-radius:50%;
    border:none;cursor:pointer;background:#fff;color:var(--pink-deep);
    box-shadow:0 10px 24px -6px rgba(138,115,85,.5);display:flex;align-items:center;justify-content:center;
    z-index:91}

  /* hint */
  .hint{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:55;
    font-family:'DM Sans';font-size:11px;color:rgba(58,47,37,.6);letter-spacing:.1em;
    text-transform:uppercase;animation:fadeOut 7s ease forwards;pointer-events:none;
    background:rgba(255,255,255,.6);padding:6px 14px;border-radius:99px;backdrop-filter:blur(8px)}
  @keyframes fadeOut{0%,60%{opacity:1}100%{opacity:0}}

  @media (max-width:640px){
    .label{min-width:80px;font-size:11px}
    .btn{width:38px;height:38px}
    .btn.big{width:46px;height:46px}
    .ticks{display:none}
    header{padding:10px 16px}
    .logo{font-size:18px}
  }

  .grid h2{font-family:var(--display);font-weight:500;font-size:clamp(48px,9vw,140px);line-height:.92;letter-spacing:-.045em;margin-bottom:50px}