/* Homepage hero: photographic, layered CSS-3D scene. Parallax writes the `translate` property on .il-layer;
   floats and Ken Burns use `transform` on children, so the two never fight. */
.il-hero { --px: 0; --py: 0; --sy: 0; position: relative; height: clamp(40rem, 100svh, 60rem); overflow: hidden; isolation: isolate; background: #0c0d0f; }
.il-hero__bg { position: absolute; inset: 0; z-index: -2; background: radial-gradient(60rem 36rem at 80% 55%, rgba(125, 14, 25, .55), transparent 70%), #0c0d0f; }
.il-hero__glow { position: absolute; inset: 0; background: radial-gradient(28rem 18rem at 72% 70%, rgba(224, 118, 43, .14), transparent 70%); mix-blend-mode: screen; }
.il-hero__vignette { position: absolute; inset: 0; z-index: 7; pointer-events: none; background: radial-gradient(120% 95% at 55% 45%, transparent 55%, rgba(0, 0, 0, .6)); }
.il-hero__vignette::after, .il-band__shade::after { content: ""; position: absolute; inset: 0; opacity: .09; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

/* Oil-flow lines, above photography, below copy */
.il-flow { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; mix-blend-mode: screen; opacity: .85; -webkit-mask-image: linear-gradient(90deg, transparent 35%, #000 62%); mask-image: linear-gradient(90deg, transparent 35%, #000 62%); }
.il-flow__p { fill: none; stroke: url(#il-oil); stroke-linecap: round; stroke-dasharray: 260 1500; animation: il-run 11s linear infinite; }
.il-flow__p--a { stroke-width: 3; } .il-flow__p--b { stroke-width: 1.5; animation-duration: 14s; animation-delay: -4s; } .il-flow__p--c { stroke-width: 2; animation-duration: 17s; animation-delay: -9s; opacity: .7; } .il-flow__p--d { stroke-width: 1; animation-duration: 12s; animation-delay: -2s; opacity: .6; }
@keyframes il-run { from { stroke-dashoffset: 1760; } to { stroke-dashoffset: 0; } }

/* Slides: depth transition */
.il-hero__slides { position: absolute; inset: 0; perspective: 1500px; perspective-origin: 62% 42%; }
.il-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translate3d(0, 0, -240px) scale(.94); transform-style: preserve-3d; transition: opacity .9s var(--il-ease), transform 1.2s var(--il-ease), visibility 0s .9s; }
.il-slide:not(.is-active):not(.is-leaving):not(.is-armed) { display: none; }
.il-slide.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; z-index: 2; }
.il-slide.is-leaving { opacity: 0; visibility: visible; transform: translate3d(0, 0, 180px) scale(1.07); transition-delay: 0s; z-index: 3; }
.il-slide__art::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, #0c0d0f 0%, rgba(12, 13, 15, .9) 28%, rgba(12, 13, 15, .35) 62%, rgba(12, 13, 15, .5) 100%), linear-gradient(0deg, #0c0d0f, transparent 28%); }
.il-slide__art { position: absolute; inset: 0; translate: 0 calc(var(--sy) * 36px); }
.il-slide__inner { position: relative; z-index: 5; height: 100%; display: flex; align-items: center; padding-top: var(--il-hh); pointer-events: none; }
.il-slide__copy { max-width: 36rem; pointer-events: auto; }
.il-hero__title { margin: 0 0 1.25rem; font: 700 var(--wp--preset--font-size--title-1)/.93 var(--il-display); text-transform: uppercase; letter-spacing: .005em; color: #fff; text-wrap: balance; text-shadow: 0 2px 30px rgba(0, 0, 0, .6); }
.il-hero__text { margin: 0 0 2rem; font-size: var(--wp--preset--font-size--lead); color: var(--il-silver); max-width: 30rem; }
.il-hero__cta { display: flex; flex-wrap: wrap; gap: .85rem; margin: 0; }
.il-slide.is-active .il-slide__copy > * { animation: il-rise .9s var(--il-ease) both; }
.il-slide.is-active .il-slide__copy > :nth-child(2) { animation-delay: .08s; } .il-slide.is-active .il-slide__copy > :nth-child(3) { animation-delay: .16s; } .il-slide.is-active .il-slide__copy > :nth-child(4) { animation-delay: .24s; }
@keyframes il-rise { from { opacity: 0; translate: 0 26px; } }

/* Photography layers with camera movement */
.il-layer { position: absolute; translate: calc(var(--px) * var(--d) * 1px) calc(var(--py) * var(--d) * 1px); }
.il-ph { position: absolute; inset: 0; }
.il-ph .il-layer { inset: -3%; }
.il-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.il-ph--engine img { object-position: 68% 50%; }
.il-ph--oil img { object-position: 78% 40%; }
.il-ph--turbine img { object-position: 70% 50%; }
.il-slide.is-active .il-ph img { animation: il-kb 12s ease-out both; }
@keyframes il-kb { from { transform: scale(1.12) translate(1.5%, .5%); } to { transform: scale(1.02) translate(0, 0); } }
.il-ph--turbine::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(125, 14, 25, .55), transparent 65%); mix-blend-mode: multiply; }
.il-sweep { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .12) 50%, transparent 58%) 130% 0 / 260% 100% no-repeat; mix-blend-mode: screen; animation: il-sweepbg 7s ease-in-out infinite; }
@keyframes il-sweepbg { 0%, 30% { background-position: 130% 0; } 80%, 100% { background-position: -30% 0; } }

/* Glass readouts */
.il-hud, .il-standards { z-index: 4; right: max(2.5vw, calc((100vw - 80rem) / 2)); bottom: 15%; width: 16rem; padding: 1rem 1.2rem; border-radius: 10px; background: rgba(23, 25, 29, .55); border: 1px solid rgba(255, 255, 255, .16); border-top-color: rgba(255, 255, 255, .3); backdrop-filter: blur(10px); box-shadow: var(--wp--custom--shadow--lift); }
.il-hud__k { margin: 0 0 .25rem; font: 600 .8rem var(--il-display); letter-spacing: .2em; text-transform: uppercase; color: var(--il-red-text); }
.il-hud__t { margin: 0 0 .75rem; font: 700 1.5rem/1 var(--il-display); text-transform: uppercase; }
.il-hud dl { margin: 0; display: grid; gap: .35rem; }
.il-hud dl div { display: flex; justify-content: space-between; gap: 1rem; font-size: .92rem; border-bottom: 1px solid rgba(255, 255, 255, .1); padding-bottom: .3rem; }
.il-hud dt { color: var(--il-ti); } .il-hud dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.il-hud__bar { display: block; height: 3px; margin-top: .8rem; background: rgba(255, 255, 255, .12); overflow: hidden; border-radius: 2px; }
.il-hud__bar i { display: block; width: var(--w); height: 100%; background: linear-gradient(90deg, var(--il-burg), var(--il-red), var(--il-copper)); transform-origin: left; animation: il-bar 2.4s var(--il-ease) both; }
@keyframes il-bar { from { transform: scaleX(0); } }
.il-standards { width: 17rem; }
.il-standards ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.il-standards li { position: relative; display: grid; grid-template-columns: 4rem 1fr; gap: .5rem; padding-bottom: .55rem; font-size: .95rem; }
.il-standards b { font: 700 1.1rem var(--il-display); letter-spacing: .12em; color: var(--il-red-text); }
.il-standards li i { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, var(--il-red), transparent); transform-origin: left; animation: il-bar 2s var(--il-ease) both; }
.il-standards__f { margin: .9rem 0 0; font: 600 .85rem var(--il-display); letter-spacing: .16em; text-transform: uppercase; color: var(--il-ti); }

/* Slide 2: product stage */
.il-stage { position: absolute; right: max(2vw, calc((100vw - 80rem) / 2)); bottom: 5%; width: min(46vw, 40rem); height: 78%; perspective: 1000px; z-index: 3; }
.il-b { bottom: 4%; }
.il-bottle { position: relative; display: block; animation: il-float 7s ease-in-out infinite alternate; -webkit-box-reflect: below 2px linear-gradient(transparent 72%, rgba(255, 255, 255, .22)); }
.il-bottle img { display: block; width: 100%; height: auto; }
.il-bottle::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .6) 50%, transparent 62%) 130% 0 / 260% 100% no-repeat; -webkit-mask: var(--img) center / contain no-repeat; mask: var(--img) center / contain no-repeat; mix-blend-mode: overlay; animation: il-sweep 6s ease-in-out infinite; }
@keyframes il-float { from { transform: translateY(0) rotate(-.6deg); } to { transform: translateY(-14px) rotate(.8deg); } }
@keyframes il-sweep { 0%, 35% { background-position: 130% 0; } 75%, 100% { background-position: -30% 0; } }
.il-b--c { left: 29%; width: 42%; z-index: 3; } .il-b--l { left: 2%; width: 31%; bottom: 9%; z-index: 1; } .il-b--r { right: 2%; width: 31%; bottom: 9%; z-index: 2; }
.il-b--l .il-bottle { animation-delay: -2s; } .il-b--r .il-bottle { animation-delay: -4s; }
.il-floor { position: absolute; left: -6%; right: -6%; bottom: -3%; height: 16%; background: radial-gradient(closest-side, rgba(255, 255, 255, .22), rgba(227, 15, 26, .1) 55%, transparent); border-radius: 50%; transform: rotateX(70deg); }
.il-callout { z-index: 5; padding: .25rem .7rem; font: 700 .85rem var(--il-display); letter-spacing: .12em; text-transform: uppercase; color: #fff; background: rgba(12, 13, 15, .7); border: 1px solid rgba(255, 255, 255, .3); border-radius: 99px; white-space: nowrap; backdrop-filter: blur(6px); }
.il-callout::before { content: ""; position: absolute; top: 50%; height: 1px; width: 2.5rem; background: linear-gradient(90deg, var(--il-red), transparent); }
.il-callout--a { left: -4%; top: 14%; } .il-callout--a::before { left: 100%; }
.il-callout--b { right: -2%; top: 8%; } .il-callout--b::before { right: 100%; transform: scaleX(-1); }
.il-callout--c { right: -4%; top: 40%; } .il-callout--c::before { right: 100%; transform: scaleX(-1); }
.il-ribbon { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.il-ribbon--back { z-index: 2; } .il-ribbon--front { z-index: 4; }
.il-ribbon__w { fill: none; stroke: url(#il-oil); stroke-width: 22; stroke-linecap: round; opacity: .5; }
.il-ribbon__s { fill: none; stroke: #ffd9a0; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 90 700; opacity: .9; animation: il-run 6s linear infinite; }

/* Slide 3: technical environment */
.il-grid3d { position: absolute; left: -30%; right: -30%; bottom: 0; height: 55%; z-index: 1; perspective: 520px; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 70%); mask-image: linear-gradient(transparent, #000 70%); }
.il-grid3d::before { content: ""; position: absolute; left: 0; right: 0; top: -40%; height: 200%; transform-origin: 50% 0; transform: rotateX(64deg); background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .12) 0 1px, transparent 1px 80px), repeating-linear-gradient(0deg, rgba(255, 255, 255, .12) 0 1px, transparent 1px 80px); animation: il-floor 6s linear infinite; }
@keyframes il-floor { to { translate: 0 80px; } }
.il-scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 3; background: linear-gradient(90deg, transparent, var(--il-red), transparent); box-shadow: 0 0 24px 2px rgba(227, 15, 26, .6); animation: il-scan 6s linear infinite; }
@keyframes il-scan { from { translate: 0 8vh; } to { translate: 0 100vh; } }
.il-art { fill: none; pointer-events: none; }
.il-art svg { display: block; width: 100%; height: 100%; }
.il-art use { fill: none; stroke: currentColor; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.il-art--gear { z-index: 3; left: -7vw; bottom: -12vw; width: 40vw; height: 40vw; color: rgba(245, 242, 236, .16); }
.il-art--gear svg { animation: il-spin 120s linear infinite; }
.il-art--gear2 { left: auto; right: -4vw; top: 8vh; bottom: auto; width: 22vw; height: 22vw; color: rgba(227, 15, 26, .38); }
.il-art--gear2 svg { animation-direction: reverse; animation-duration: 80s; }
@keyframes il-spin { to { transform: rotate(1turn); } }

/* Keyboard-only controls (no visible prev/next/pause/dots) */
.il-hero__controls:not(:focus-within) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.il-hero__controls { position: absolute; z-index: 10; left: var(--il-gut); bottom: 1.5rem; display: flex; gap: .5rem; }
.il-hero__controls button { min-height: 44px; padding: 0 1rem; background: var(--il-bg); color: #fff; border: 1px solid var(--il-paper); cursor: pointer; font: inherit; }
.il-hero__scroll { position: absolute; z-index: 8; left: 50%; bottom: 3.5rem; width: 1px; height: 3rem; margin: 0; background: linear-gradient(var(--il-red), transparent); animation: il-cue 2.4s ease-in-out infinite; display: none; }
@media (min-width: 1000px) { .il-hero__scroll { display: block; } }
@keyframes il-cue { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }

@media (max-width: 899px) {
	.il-hero { height: auto; min-height: max(46rem, 100svh); }
	.il-slide__art::before { background: linear-gradient(180deg, #0c0d0f 0%, rgba(12, 13, 15, .92) 34%, rgba(12, 13, 15, .25) 62%, rgba(12, 13, 15, .6) 100%); }
	.il-slide__inner { align-items: flex-start; padding-top: calc(var(--il-hh) + 1.25rem); }
	.il-hero__text { font-size: 1.05rem; margin-bottom: 1.25rem; }
	.il-hero__cta .il-btn--ghost { display: none; }
	.il-ph--engine img { object-position: 62% 50%; } .il-ph--oil img { object-position: 82% 30%; } .il-ph--turbine img { object-position: 78% 50%; }
	.il-stage { left: 0; right: 0; margin-inline: auto; width: min(88vw, 26rem); height: 38%; bottom: 8%; }
	.il-callout { display: none; }
	.il-hud, .il-standards { left: var(--il-gut); right: var(--il-gut); width: auto; bottom: 7.5rem; padding: .7rem 1rem; }
	.il-hud dl div:nth-child(3), .il-hud__bar { display: none; }
	.il-hud__t { font-size: 1.2rem; margin-bottom: .4rem; }
	.il-standards li { padding-bottom: .3rem; font-size: .85rem; } .il-standards__f { display: none; }
	.il-art--gear { width: 70vw; height: 70vw; left: -25vw; }
	.il-art--gear2 { display: none; }
	.il-flow { -webkit-mask-image: none; mask-image: none; opacity: .5; }
}
@media (max-width: 380px) { .il-hero__title { font-size: 2.3rem; } .il-hero__text { font-size: .98rem; } .il-slide__inner { padding-top: calc(var(--il-hh) + .5rem); } }
@media (prefers-reduced-motion: reduce) {
	.il-flow__p, .il-bottle, .il-bottle::after, .il-art--gear svg, .il-grid3d::before, .il-scan, .il-hero__scroll, .il-sweep, .il-ribbon__s, .il-slide.is-active .il-ph img { animation: none; }
	.il-flow__p { stroke-dasharray: none; opacity: .3; }
	.il-ribbon__s { stroke-dasharray: none; opacity: .5; }
	.il-scan { display: none; }
	.il-slide { transform: none; transition: opacity .5s; }
	.il-slide.is-leaving { transform: none; }
	.il-layer { translate: none; }
	.il-slide.is-active .il-slide__copy > * { animation: none; }
}

/* Phase 7: on phones the flow lines fade out behind the data panel so its numbers stay legible. */
@media (max-width: 899px) {
	.il-flow { -webkit-mask-image: linear-gradient(0deg, #000 0 6.5rem, transparent 7rem 16rem, #000 17rem); mask-image: linear-gradient(0deg, #000 0 6.5rem, transparent 7rem 16rem, #000 17rem); }
	.il-hud, .il-standards { background: rgba(23, 25, 29, .78); }
}

/* Phase 9 motion budget: looping decoration pauses when its container is still (site.js). */
.il-hero.is-still :is(.il-flow__p, .il-sweep, .il-bottle, .il-ribbon__s, .il-scan, .il-art--gear svg, .il-hero__scroll), .il-hero.is-still .il-bottle::after, .il-hero.is-still .il-grid3d::before { animation-play-state: paused; }