/* Levi Co: the dawn landscape from the brand banner, one opening gesture, pausable ambient loops and pointer feedback. */

.hero{--ground-h:76px;--range-h:clamp(300px,min(44vw,calc(54svh - 40px)),540px);--mark-w:clamp(190px,min(21vw,calc(34svh - 20px)),340px);--mark-h:calc(var(--mark-w) * .7736);--peak-x:74.75%;--px:0;--py:0;--hp:0}
.hero-scene{position:absolute;inset:0 0 var(--ground-h);z-index:0;order:2;pointer-events:none}
.range-stack{position:absolute;left:0;right:0;bottom:0;height:var(--range-h)}
.range{position:absolute;inset:0;translate:calc(var(--px) * var(--depth) * 1px) calc(var(--hp) * var(--sink) * 1px)}
.range svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.range-far{--depth:-8;--sink:90}
.range-peak{--depth:-14;--sink:58}
.range-mid{--depth:-22;--sink:30}
.range-near{--depth:-30;--sink:0}
.sky-glow{position:absolute;left:var(--peak-x);bottom:calc(84% + var(--mark-h) * .3);width:calc(var(--mark-w) * 3.2);aspect-ratio:1;margin:0 0 calc(var(--mark-w) * -1.6) calc(var(--mark-w) * -1.6);translate:calc(var(--px) * 16px) calc(var(--hp) * -30px)}
.sky-glow-core{width:100%;height:100%;border-radius:50%;background:radial-gradient(circle,rgba(255,222,150,.95) 0%,rgba(255,230,178,.72) 14%,rgba(255,238,206,.42) 30%,rgba(255,245,228,.16) 46%,rgba(255,250,242,0) 62%)}
.hero-mark{position:absolute;left:var(--peak-x);bottom:calc(84% + 20px);width:var(--mark-w);margin-left:calc(var(--mark-w) / -2);translate:calc(var(--px) * 12px) calc(var(--hp) * -60px)}
.mark-tilt{transform:perspective(900px) rotateX(calc(var(--py) * -10deg)) rotateY(calc(var(--px) * 14deg))}
.mark-float{position:relative}
.hero-mark-img{width:100%;height:auto;filter:drop-shadow(0 26px 30px rgba(11,77,176,.22))}
.mark-sheen{position:absolute;inset:0;pointer-events:none;-webkit-mask:url('assets/brand/levi-mark.webp') center/100% 100% no-repeat;mask:url('assets/brand/levi-mark.webp') center/100% 100% no-repeat;background:linear-gradient(112deg,transparent 38%,rgba(255,255,255,.7) 50%,transparent 62%) 130% 0/260% 100% no-repeat;transition:background-position 1.4s var(--ease-io)}
.hero:hover .mark-sheen{background-position:-30% 0}
.fog{position:absolute;left:0;right:0;height:22%;overflow:hidden}
.fog-a{bottom:15%}
.fog-b{bottom:6%;height:18%}
.fog span{position:absolute;inset:0 -40%;background:radial-gradient(38% 58% at 22% 55%,rgba(255,255,255,.82),transparent 70%),radial-gradient(30% 50% at 62% 45%,rgba(255,255,255,.62),transparent 70%),radial-gradient(26% 46% at 88% 60%,rgba(255,255,255,.55),transparent 70%)}
.fog-b span{opacity:.75}

@keyframes hero-line-in{from{transform:translateY(108%)}to{transform:translateY(0)}}
@keyframes rise-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes range-rise{from{opacity:0;transform:translateY(18%)}to{opacity:1;transform:none}}
@keyframes mark-rise{0%{opacity:0;transform:translateY(58%) scale(.9)}30%{opacity:1}100%{opacity:1;transform:none}}
@keyframes glow-bloom{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:none}}
@keyframes script-write{from{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0 0;mask-position:0 0}}
@keyframes swash-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes sheen-sweep{from{background-position:130% 0}to{background-position:-30% 0}}
@keyframes menu-in{from{opacity:0;transform:translateY(-10px) scale(.97)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}

.script-ink{-webkit-mask-image:linear-gradient(90deg,#000 42%,transparent 58%);mask-image:linear-gradient(90deg,#000 42%,transparent 58%);-webkit-mask-size:260% 100%;mask-size:260% 100%;-webkit-mask-position:0 0;mask-position:0 0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}

@media (prefers-reduced-motion:no-preference){
  .hero:not([data-intro-complete]) .hero-eyebrow{animation:rise-in .8s var(--ease) both}
  .hero:not([data-intro-complete]) .hero-ink{animation:hero-line-in .95s var(--ease) .06s both}
  .hero:not([data-intro-complete]) .hero-line:nth-of-type(2) .hero-ink{animation-delay:.15s}
  .hero:not([data-intro-complete]) .hero-script{animation:rise-in .8s var(--ease) .38s both}
  .hero:not([data-intro-complete]) .script-ink{animation:script-write 1.4s var(--ease-io) .45s both}
  .hero:not([data-intro-complete]) .swash path{animation:swash-draw .9s var(--ease) 1.3s both}
  .hero:not([data-intro-complete]) .hero-copy{animation:rise-in .9s var(--ease) .32s both}
  .hero:not([data-intro-complete]) .range-far svg{animation:range-rise 1.4s var(--ease) both}
  .hero:not([data-intro-complete]) .range-peak svg{animation:range-rise 1.4s var(--ease) .08s both}
  .hero:not([data-intro-complete]) .range-mid svg{animation:range-rise 1.4s var(--ease) .16s both}
  .hero:not([data-intro-complete]) .range-near svg{animation:range-rise 1.4s var(--ease) .24s both}
  .hero:not([data-intro-complete]) .fog{animation:fade-in 1.6s ease .4s both}
  .hero:not([data-intro-complete]) .sky-glow{animation:glow-bloom 1.8s var(--ease) .2s both}
  .hero:not([data-intro-complete]) .hero-mark-img{animation:mark-rise 1.6s var(--ease) .3s both}
  .hero:not([data-intro-complete]) .mark-sheen{animation:sheen-sweep 1.1s var(--ease-io) 1s both}
  .mobile-menu[open] nav{transform-origin:top right;animation:menu-in .45s var(--ease) both}
  .mobile-menu[open] nav a{animation:rise-in .5s var(--ease) both}
  .mobile-menu[open] nav a:nth-child(2){animation-delay:.04s}
  .mobile-menu[open] nav a:nth-child(3){animation-delay:.08s}
  .mobile-menu[open] nav a:nth-child(4){animation-delay:.12s}
  .mobile-menu[open] nav a:nth-child(5){animation-delay:.16s}
  #submitBtn[data-state=loading] .spinner{animation:spin .9s linear infinite}
  .service-row[data-motion-toggle][open] .service-body{animation:rise-in .55s var(--ease) both}
  @supports (interpolate-size:allow-keywords) and selector(::details-content){
    .service-row{interpolate-size:allow-keywords}
    .service-row::details-content{block-size:0;overflow:clip}
    .service-row[open]::details-content{block-size:auto}
    .service-row[data-motion-toggle]::details-content{transition:block-size .32s var(--ease),content-visibility .32s allow-discrete}
  }
}

@media (prefers-reduced-motion:no-preference){
  .range,.sky-glow,.hero-mark,.mark-float,.capability-lean,.capability-track,.fog span{will-change:transform}
}

/* Ambient loops run only with JavaScript, only while their surface is visible, and stop with the Pause motion control. */
@keyframes glow-breathe{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.07);opacity:.86}}
@keyframes mark-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes fog-drift{from{transform:translateX(-6%)}to{transform:translateX(6%)}}
@keyframes capability-drift{to{transform:translateX(-50%)}}
@keyframes status-ping{0%{transform:scale(1);opacity:.75}80%,100%{transform:scale(3.4);opacity:0}}
@keyframes flow-pulse{from{stroke-dashoffset:1.14}to{stroke-dashoffset:-.14}}
@media (prefers-reduced-motion:no-preference){
  .ambient-ready .sky-glow-core{animation:glow-breathe 9s ease-in-out infinite}
  .ambient-ready .mark-float{animation:mark-bob 7s ease-in-out infinite}
  .ambient-ready .fog-a span{animation:fog-drift 26s ease-in-out infinite alternate}
  .ambient-ready .fog-b span{animation:fog-drift 34s ease-in-out -12s infinite alternate-reverse}
  .ambient-ready .capability-track{animation:capability-drift 34s linear infinite}
  .ambient-ready .status-live i{animation:status-ping 2.6s cubic-bezier(0,0,.2,1) infinite}
  .ambient-ready .service-visual[data-scene=automation] .sv-pulse{opacity:1;animation:flow-pulse 2.4s var(--ease-io) infinite}
  .ambient-ready .service-visual[data-scene=automation] .sv-pulse-b{animation-delay:.9s}
  .ambient-ready[data-motion-paused] .loop,
  .ambient-ready[data-motion-offscreen] .loop,
  .ambient-ready [data-ambient]:not([data-ambient-visible]) .loop{animation-play-state:paused}
}

/* Reveals are armed by motion.js only for content still below the viewport. */
.w{display:inline-block;overflow:clip;vertical-align:top;padding:0 .03em .14em;margin:0 -.03em -.14em}
.wi{display:inline-block}
[data-reveal-state=ready] .wi{transform:translateY(110%)}
[data-reveal-state=in] .wi{transform:none;transition:transform 1s var(--ease) calc(var(--reveal-delay,0ms) + var(--i,0) * 55ms)}
[data-reveal-up][data-reveal-state=ready]{opacity:0;transform:translateY(28px)}
[data-reveal-up][data-reveal-state=in]{opacity:1;transform:none;transition:opacity .9s var(--ease) var(--reveal-delay,0ms),transform 1s var(--ease) var(--reveal-delay,0ms)}

/* Scroll state */
.site-header[data-scrolled]{background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(150%) blur(10px);backdrop-filter:saturate(150%) blur(10px);box-shadow:0 1px 0 rgba(5,21,48,.06),0 12px 32px -20px rgba(5,21,48,.3)}
.site-header[data-scrolled] .nav-wrap{min-height:68px}
.site-header[data-hidden]{transform:translateY(-100%)}
.scroll-progress{position:absolute;left:0;right:0;bottom:0;height:2px;pointer-events:none}
.scroll-progress span{display:block;height:100%;background:linear-gradient(90deg,var(--blue-600),var(--sky-400));transform:scaleX(var(--page-progress,0));transform-origin:left;opacity:0;transition:opacity .35s}
.site-header[data-scrolled] .scroll-progress span{opacity:1}
.nav-indicator{position:absolute;left:0;bottom:3px;width:var(--ind-w,0);height:2px;border-radius:2px;background:var(--grad-cta);transform:translateX(var(--ind-x,0));opacity:0;pointer-events:none;transition:transform .55s var(--ease),width .55s var(--ease),opacity .35s}
.desktop-nav[data-active] .nav-indicator{opacity:1}

/* Pointer feedback (fine pointers only, never with reduced motion) */
.fx-pointer [data-magnetic]{translate:var(--mx,0px) var(--my,0px)}
.fx-pointer [data-magnetic]>span{translate:calc(var(--mx,0px) * .4) calc(var(--my,0px) * .4);transition:translate .45s var(--ease)}
.fx-pointer [data-spotlight]::after{content:"";position:absolute;inset:0;z-index:4;border-radius:inherit;pointer-events:none;background:radial-gradient(400px circle at var(--sx,50%) var(--sy,50%),rgba(255,255,255,.2),transparent 46%);opacity:0;transition:opacity .5s var(--ease)}
.fx-pointer .founder[data-spotlight]::after{background:radial-gradient(360px circle at var(--sx,50%) var(--sy,50%),rgba(31,134,239,.13),transparent 52%)}
.fx-pointer [data-spotlight]:hover::after{opacity:1}
.fx-pointer [data-tilt]{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .8s var(--ease),translate .55s var(--ease),box-shadow .55s var(--ease)}
.fx-pointer [data-tilt][data-tilting]{transition:transform .18s ease-out,translate .55s var(--ease),box-shadow .55s var(--ease)}
.fx-pointer [data-cursor]{cursor:none}
[data-proxy]{cursor:pointer}
.cursor-badge{position:fixed;left:0;top:0;z-index:60;width:88px;height:88px;margin:-44px 0 0 -44px;pointer-events:none;will-change:transform}
.cursor-badge span{display:grid;place-items:center;width:100%;height:100%;padding:10px;border-radius:50%;background:var(--grad-cta);color:#fff;font:700 10.5px/1.15 var(--display);letter-spacing:.16em;text-align:center;text-transform:uppercase;box-shadow:0 18px 40px -16px rgba(18,96,214,.75),inset 0 1px 0 rgba(255,255,255,.25);opacity:0;scale:.3;transition:opacity .25s var(--ease),scale .5s var(--spring)}
.cursor-badge[data-visible] span{opacity:1;scale:1}

/* Service illustrations: the active scene follows the open or hovered service. */
.service-visual .scene{opacity:0;transform:translateY(10px) scale(.96);transition:opacity .5s var(--ease),transform .7s var(--ease)}
.service-visual[data-scene=web] .scene-web,.service-visual[data-scene=app] .scene-app,.service-visual[data-scene=software] .scene-software,.service-visual[data-scene=automation] .scene-automation,.service-visual[data-scene=game] .scene-game{opacity:1;transform:none}
.scene .sv-in{opacity:0;transform:translateY(12px);transform-box:fill-box;transition:opacity .5s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--d,0) * 55ms + 120ms)}
.service-visual[data-scene=web] .scene-web .sv-in,.service-visual[data-scene=app] .scene-app .sv-in,.service-visual[data-scene=software] .scene-software .sv-in,.service-visual[data-scene=automation] .scene-automation .sv-in,.service-visual[data-scene=game] .scene-game .sv-in{opacity:1;transform:none}
.sv-frame{fill:#fff;stroke:#cfdcef;stroke-width:1.5}
.sv-rule{stroke:#e1e9f5;stroke-width:1.5}
.sv-dot{fill:#d3deed}
.sv-strong{fill:#0a2148}
.sv-soft{fill:#dfe8f5}
.sv-cta{fill:url(#g-brand)}
.sv-photo{fill:url(#g-soft)}
.sv-photo-peak{fill:#7ea6dc}
.sv-card{fill:#f3f7fd;stroke:#dde7f4;stroke-width:1.2}
.sv-side{fill:#f4f8fd}
.sv-note{fill:#fff;stroke:#d6e2f2;stroke-width:1.2}
.sv-note-dot{fill:var(--blue-500)}
.sv-check{fill:none;stroke:#18a066;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.sv-bar{fill:url(#g-brand);transform-box:fill-box;transform-origin:bottom;transform:scaleY(.12);transition:transform .9s var(--spring);transition-delay:calc(var(--d,0) * 70ms + 150ms)}
.service-visual[data-scene=software] .sv-bar{transform:none}
.sv-line{fill:none;stroke:var(--sky-400);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s var(--ease) .4s}
.service-visual[data-scene=software] .sv-line{stroke-dashoffset:0}
.sv-flow{fill:none;stroke:#cfdcef;stroke-width:3;stroke-linecap:round;stroke-dasharray:2 8}
.sv-pulse{fill:none;stroke:var(--blue-500);stroke-width:4;stroke-linecap:round;stroke-dasharray:.14 .86;stroke-dashoffset:1.14;opacity:0}
.sv-node{fill:#fff;stroke:#cfdcef;stroke-width:1.5}
.sv-node-main{fill:url(#g-brand);stroke:none}
.sv-node-ico{fill:none;stroke:var(--blue-600);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sv-node-ico-light{stroke:#fff}

@media (max-width:900px){
  .hero{--range-h:clamp(230px,58vw,400px);--mark-w:clamp(150px,40vw,250px);--ground-h:64px}
  .hero-scene{position:relative;inset:auto;height:calc(var(--range-h) * .84 + var(--mark-h) + 30px);margin-top:28px}
  .range-stack{left:auto;right:0;width:max(100%,720px)}
}

@media (prefers-reduced-motion:reduce){
  .script-ink{-webkit-mask:none;mask:none}
  .ambient-ready .loop{animation:none!important}
}