/* =====================================================================
   DOUBLE UP — hero sahnesi
   ---------------------------------------------------------------------
   Katmanlar tek bir perspektifin icinde gercekten farkli derinliklerde
   duruyor:

     arka plan -> geriye itilmis genis bir duzlem
     bardak    -> ozne, one yakin
     nesneler  -> on ile arka arasina dagilmis, bir kismi bardagin onunde

   Sahne icecege gore degisiyor: limonata limon dilimi + orman meyveleriyle,
   matcha toz patlamasi + cileklerle, karamelli latte ise yatay karamel
   patlamasi + buz kupleri ve kahve cekirdekleriyle.
   ===================================================================== */
#hero .scene{position:absolute;inset:0;display:grid;place-items:center;
  perspective:1200px;perspective-origin:50% 46%;
  pointer-events:auto;z-index:3;overflow:visible;
  /* Horizontal gestures belong to the carousel, vertical ones to the page.
     Without this the browser claimed the sideways swipe for itself: on a phone
     the swipe was read as a navigation gesture and the page left for
     about:blank mid-transition, which is exactly what made the scene look like
     it was collapsing into itself. */
  touch-action:pan-y}

#hero .scene-inner{position:relative;
  width:min(29vw,320px);
  aspect-ratio:757/1100;
  transform-style:preserve-3d;
  will-change:transform}

/* ---------------------------------------------------------- arka planlar --
   Uc sahnenin arka plani da ayni yuvada; icecege gore biri gorunur oluyor.

   Cikis, giriisten DAHA HIZLI. Boylece eski arka plan gercekten kaybolmadan
   yenisi baslamiyor; ayni anda iki buyuk ve kalabalik gorsel ekranda kalirsa
   tek bir karisik goruntu gibi okunuyor. */
#hero .scene-backdrop{position:absolute;left:50%;top:47%;
  max-width:none;pointer-events:none;
  opacity:0;visibility:hidden;
  transition:opacity .2s ease-out,visibility 0s linear .2s}

#hero .scene-backdrop.is-on{opacity:1;visibility:visible;
  transition:opacity .45s cubic-bezier(.4,0,.2,1),visibility 0s linear 0s}

/* The lime belongs dead centre behind the cup, and wider than it: in the
   reference the slice reads as a big disc whose rind rings the glass.

   max-width:none is load-bearing. The site carries a global
   `img{max-width:100%}`, which silently clamped this to the width of the scene
   box - 196% asked for 627px and the element laid out at 320px. */
/* Genislik, konunun cerceveyi doldurma oranina gore secildi. Eski lime
   dosyasinda damlalar cerceveyi dolduruyordu (%78), yeni dosyada splash daha
   genis bir sayfada duruyor ve konu cercevenin yalnizca %58'ini kapliyor. Ayni
   genislikte birakilinca lime camın arkasinda kayboluyordu; oran
   78/58 ~ 1.35 ile carpildi. */
#hero .scene-lime{width:178%;height:auto;
  transform:translate(-50%,-50%) translateZ(-120px);
  filter:drop-shadow(0 20px 30px rgba(20,40,20,.28)) blur(.3px)}

/* the caramel splash and the matcha powder are wide bands, so they are sized by
   height and allowed to run past the scene on both sides */
#hero .scene-caramel{height:158%;width:auto;
  transform:translate(-50%,-50%) translateZ(-140px);
  filter:drop-shadow(0 24px 34px rgba(60,34,10,.24)) blur(.4px)}

#hero .scene-matcha{height:132%;width:auto;
  transform:translate(-50%,-50%) translateZ(-140px) rotate(-4deg);
  filter:drop-shadow(0 22px 32px rgba(30,60,20,.26)) blur(.4px)}

/* --------------------------------------------------------------- bardak -- */
#hero .scene-glass{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;opacity:0;pointer-events:none;
  filter:drop-shadow(0 34px 44px rgba(12,26,44,.34));
  transition:opacity .5s cubic-bezier(.4,0,.2,1),
             transform .62s cubic-bezier(.22,.9,.3,1)}
#hero .scene-glass.is-on{opacity:1;
  transform:translateZ(40px) translateX(0) scale(1) rotateY(0deg)}
/* the outgoing glass leaves on the side the reader swiped, so the movement
   follows the hand instead of opposing it */
#hero .scene-glass.is-off-right{opacity:0;
  transform:translateZ(-40px) translateX(42%) scale(.84) rotateY(-16deg)}
#hero .scene-glass.is-off-left{opacity:0;
  transform:translateZ(-40px) translateX(-42%) scale(.84) rotateY(16deg)}

/* ------------------------------------------------------------- nesneler --
   opacity alone is not enough here, and that was the overlap the client kept
   seeing on their phone: the box sits in a preserve-3d context, and a child
   translated far enough along Z is not reliably grouped by its parent's
   opacity - the computed opacity read 0 while the sprites still painted, so
   the previous drink's fruit stayed on screen with the new drink's ice.

   visibility cannot be escaped that way, and pairing it with a 0s delayed
   transition keeps the fade while guaranteeing the old set is really gone. */
#hero .scene-items{position:absolute;inset:0;transform-style:preserve-3d;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s ease-out,visibility 0s linear .2s}
#hero .scene-items.is-on{opacity:1;visibility:visible;
  transition:opacity .42s cubic-bezier(.4,0,.2,1),visibility 0s linear 0s}
#hero .scene-item{position:absolute;height:auto;
  transform-style:preserve-3d;will-change:transform;
  filter:drop-shadow(0 12px 18px rgba(8,20,40,.32))}
/* ice reads better with a cooler, tighter shadow than fruit */
#hero .scene-items[data-set="ice"] .scene-item{
  filter:drop-shadow(0 10px 16px rgba(20,40,70,.26))}

/* the little dots that say there are more drinks */
#hero .scene-dots{position:absolute;left:50%;bottom:-38px;transform:translateX(-50%);
  display:flex;gap:10px;pointer-events:auto;z-index:7}
#hero .scene-dot{width:9px;height:9px;padding:0;border:0;border-radius:50%;
  background:rgba(19,19,17,.22);cursor:pointer;
  transition:background .3s,transform .3s}
#hero .scene-dot.is-on{background:var(--ink);transform:scale(1.25)}
#hero .scene-dot:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* The wordmark and the opening-hours badge were both z-index 3, the same as the
   scene - and the scene comes later in the DOM, so the glass was painting over
   the signature and it vanished. They belong in front. */
#hero .hero-top,
#hero .badge-open{z-index:6}

/* the scene is a swipe target now, so nothing in it should behave like a
   draggable image or selectable text */
#hero .scene, #hero .scene *{-webkit-user-drag:none;user-select:none;
  -webkit-user-select:none;-webkit-touch-callout:none}
#hero .scene:focus-visible{outline:2px solid var(--ink);outline-offset:8px}

@media (max-width:860px){
  #hero .scene-inner{width:min(52vw,300px)}
  #hero .scene-lime{width:188%}
  #hero .scene-caramel{height:150%}
  #hero .scene-matcha{height:126%}
}

@media (prefers-reduced-motion: reduce){
  #hero .scene-inner,#hero .scene-item,#hero .scene-glass{transition:none}
}