/* ==========================================================
   Galloglass – motion layer
   Only applies when JavaScript has run (html.js) AND the visitor
   hasn't asked their device for reduced motion. Delete this file
   (and the link in index.html) and the site still works, just static.
   Values driven from js/main.js: --hy, --py, --p, --accent, --d, --i
   ========================================================== */

/* progress line sits in the nav at all times; JS fills it */
.progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent,var(--paper));transform-origin:left;transform:scaleX(var(--p,0));transition:background .7s ease;pointer-events:none}

/* active link in the nav */
.nav ul a[aria-current="true"]{border-color:var(--paper)}

@media (prefers-reduced-motion:no-preference){

  /* ---- age gate: content rises in, then lifts away on entry ---- */
  .js .gate-inner{animation:gate-in 1s cubic-bezier(.2,.7,.2,1) both}
  .js .gate.hidden .gate-inner{transform:scale(.96) translateY(-.75rem);opacity:0;transition:transform .6s ease,opacity .5s ease}
  @keyframes gate-in{from{opacity:0;transform:translateY(1.25rem)}to{opacity:1;transform:none}}

  /* ---- nav drops in once the gate clears ---- */
  .js .nav{translate:0 -110%;transition:translate .9s cubic-bezier(.2,.7,.2,1) .5s,background .3s}
  .js body.entered .nav{translate:none}

  /* ---- hero: settles from a slight zoom, drifts slower than the page ---- */
  .js .hero img.bg{scale:1.12;translate:0 var(--hy,0px);transition:scale 3s cubic-bezier(.2,.7,.2,1);will-change:translate}
  .js body.entered .hero img.bg{scale:1}
  .js .scroll-cue{transform-origin:top;animation:cue 2.4s ease-in-out infinite;transition:opacity .3s}
  @keyframes cue{0%{transform:translateX(-50%) scaleY(0)}55%{transform:translateX(-50%) scaleY(1)}100%{transform:translateX(-50%) scaleY(1);opacity:0}}

  /* ---- generic reveal: fade and rise ---- */
  .js [data-reveal]{opacity:0;translate:0 1.5rem;transition:opacity .9s ease var(--d,0ms),translate 1s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
  .js [data-reveal].in{opacity:1;translate:none}

  /* ---- headline word-by-word reveal ---- */
  .js [data-split] .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
  .js [data-split] .wi{display:inline-block;translate:0 115%;transition:translate 1.1s cubic-bezier(.2,.8,.2,1) calc(var(--i,0) * 55ms)}
  .js [data-split].in .wi{translate:none}

  /* ---- product sections ---- */
  .js .bottle[data-reveal]{translate:0 0;scale:.94;transition:opacity 1.2s ease,scale 1.4s cubic-bezier(.2,.7,.2,1)}
  .js .bottle[data-reveal].in{scale:1}
  .sku .bottle img{translate:0 var(--py,0px);will-change:translate}
  .sku .ghost{translate:0 var(--gy,0px);will-change:translate}

  /* spec list: rule draws across, rows follow */
  .js .spec{position:relative;border-top-color:transparent}
  .js .spec::before{content:"";position:absolute;top:-2px;left:0;right:0;height:2px;background:var(--c);transform-origin:left;transform:scaleX(0);transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
  .js .spec.in::before{transform:scaleX(1)}

  /* range index: thumbs lift on hover (base hover scale is in style.css) */
  .lineup a{transition:transform .4s ease}
  .lineup a:hover{transform:translateY(-.35rem)}

  /* craft column rules draw in */
  .js .craft-grid{border-top-color:transparent;position:relative}
  .js .craft-grid::before{content:"";position:absolute;top:-2px;left:0;right:0;height:2px;background:var(--ink);transform-origin:left;transform:scaleX(0);transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
  .js .craft-grid.in::before{transform:scaleX(1)}
}