/* Photoreal hero objects for the offering pages.
   One render per solution, staged like the Brain: key light, glow, floor
   reflection, pointer tilt and travelling light. Loaded after offering-layout.css. */

/* ---------- The object ---------- */
body.offering .object-frame{position:relative;width:100%;height:100%;container-type:size;display:grid;place-items:center;perspective:1300px}
body.offering .object-tilt{position:relative;width:min(100cqw,calc(100cqh * var(--ar)));aspect-ratio:var(--ar);transform-style:preserve-3d;transform:translateY(var(--bob,0px)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));will-change:transform}
body.offering .object-body{position:absolute;inset:0;transform:translateZ(0)}
body.offering .object-img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain;filter:drop-shadow(0 30px 40px #000a) drop-shadow(0 0 60px color-mix(in srgb,var(--orange) 26%,transparent));opacity:0;transform:scale(.94);transition:opacity 1.1s ease,transform 1.4s cubic-bezier(.2,.8,.2,1)}
body.offering .is-lit .object-img{opacity:1;transform:none}
body.offering .object-electric{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen;opacity:0;transition:opacity 1.4s ease .3s}
body.offering .is-lit .object-electric{opacity:1}
/* A key light that follows the pointer, clipped to the object's own silhouette. */
body.offering .object-sheen{position:absolute;inset:0;pointer-events:none;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:radial-gradient(circle at var(--lx,32%) var(--ly,26%),#fff8 0,#fff2 18%,transparent 42%);mix-blend-mode:soft-light;overflow:hidden}
body.offering .object-sheen:after{content:'';position:absolute;inset:-10% -60%;background:linear-gradient(105deg,transparent 42%,#ffffff55 49%,#fff9 50%,#ffffff55 51%,transparent 58%);mix-blend-mode:overlay;animation:object-glint 7.5s cubic-bezier(.5,0,.3,1) infinite;transform:translateX(-60%)}
@keyframes object-glint{0%,62%{transform:translateX(-60%)}88%,100%{transform:translateX(60%)}}
/* Glossy floor: the render mirrored, fading out a short way below. */
body.offering .object-reflection{position:absolute;left:0;top:calc(100% - 2%);width:100%;height:100%;object-fit:contain;object-position:center bottom;transform:scaleY(-1);transform-origin:center top;opacity:.2;pointer-events:none;-webkit-mask-image:linear-gradient(to top,#000 0,#0006 12%,transparent 32%);mask-image:linear-gradient(to top,#000 0,#0006 12%,transparent 32%);filter:blur(1.5px) saturate(1.2)}
body.offering .object-halo{position:absolute;inset:-20% -14%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--orange) 42%,transparent),color-mix(in srgb,var(--orange) 12%,transparent) 55%,transparent 76%);filter:blur(24px);transform:translateZ(-160px) translateX(calc(var(--sx,0) * -30px));animation:object-breathe 6s ease-in-out infinite;pointer-events:none}
@keyframes object-breathe{0%,100%{opacity:.7;scale:.96}50%{opacity:1;scale:1.04}}
body.offering .object-floor{position:absolute;left:8%;right:8%;bottom:-6%;height:16%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--orange) 46%,transparent),transparent 72%);filter:blur(10px);transform:translateZ(-40px) translateX(calc(var(--sx,0) * -26px)) rotateX(70deg);opacity:.75;pointer-events:none}

/* ---------- Hero stage ---------- */
body.offering .theme-visual.object-visual,body.offering .hero-stage:has(h1.len-2) .theme-visual.object-visual{z-index:3;top:66%;width:min(760px,50vw);height:min(470px,49vh);display:block;transform:translate(-50%,-50%)}
body.offering .hero-stage:has(h1.len-2) .theme-visual.object-visual{top:69%;height:min(420px,43vh)}
body[data-solution="speakeaisy"].offering .theme-visual.object-visual{top:67%;height:min(560px,56vh)}
body.offering .hero-intro{z-index:2}
body.offering .hero-sparks{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
body.offering .hero-cursor-light{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .6s ease;background:radial-gradient(520px circle at var(--cx,50%) var(--cy,50%),color-mix(in srgb,var(--orange) 16%,transparent),transparent 70%)}
body.offering .hero-cursor-light.on{opacity:1}
body.offering .hero-ambient{animation:ambient-drift 14s ease-in-out infinite alternate}
@keyframes ambient-drift{from{transform:translate3d(-2%,1%,0) scale(1)}to{transform:translate3d(2%,-2%,0) scale(1.08)}}

/* The hero card carries a live signal, like the Brain's knowledge core. */
body.offering .hero-note{width:224px;box-shadow:0 20px 50px #0006,inset 0 1px 0 #ffffff14}
body.offering .note-bars{display:flex;align-items:flex-end;gap:3px;height:22px;margin-top:12px}
body.offering .note-bars i{flex:1;height:30%;border-radius:1px;background:var(--orange);opacity:.85;animation:note-bar 1.6s ease-in-out infinite;animation-delay:calc(var(--i) * -.13s)}
@keyframes note-bar{0%,100%{height:22%}50%{height:100%}}

/* Second hero state: object to the left, headline builds on the right. */
body.offering .hero-reveal{top:50%;left:auto;right:56px;width:min(600px,42vw);text-align:left;transform:translateY(-50%)}
body.offering .hero-reveal h2{font-family:var(--display);text-transform:uppercase;font-size:clamp(48px,5.4vw,96px);line-height:.9;letter-spacing:-.02em;max-width:none;margin:18px 0 0}
body.offering .hero-reveal h2 .accent{color:var(--orange);text-shadow:0 0 40px color-mix(in srgb,var(--orange) 40%,transparent)}
body.offering .hero-reveal p{margin-top:22px;font-size:17px;max-width:40ch}
body.offering .knowledge-tags .tag{backdrop-filter:blur(10px);box-shadow:0 10px 30px #0005;display:flex;align-items:center;gap:10px}
body.offering .knowledge-tags .tag:before{content:'';width:6px;height:6px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px color-mix(in srgb,var(--orange) 22%,transparent),0 0 14px var(--orange)}
body.offering .tag-a{left:5%;top:30%;bottom:auto}
body.offering .tag-b{left:30%;right:auto;top:21%;bottom:auto}
body.offering .tag-c{left:9%;right:auto;top:auto;bottom:19%}

/* ---------- The offer: an anatomy of the object ---------- */
body.offering .anatomy{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:64px;align-items:start}
body.offering .anatomy-stage{position:relative;height:100%}
body.offering .anatomy-sticky{position:sticky;top:96px;height:calc(100svh - 150px);max-height:720px;display:flex;flex-direction:column;justify-content:center;border-radius:28px;background:radial-gradient(ellipse at 50% 58%,color-mix(in srgb,var(--orange) 16%,transparent),transparent 64%),linear-gradient(180deg,#ffffff08,#ffffff02);background:radial-gradient(ellipse at 50% 58%,color-mix(in srgb,var(--orange) 16%,transparent),transparent 64%),linear-gradient(180deg,light-dark(#14101406,#ffffff08),light-dark(#14101402,#ffffff02));border:1px solid var(--line);overflow:hidden;isolation:isolate}
body.offering .anatomy-sticky:before{content:'';position:absolute;inset:0;z-index:-1;background-image:linear-gradient(light-dark(#14101410,#ffffff0c) 1px,transparent 1px),linear-gradient(90deg,light-dark(#14101410,#ffffff0c) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(ellipse at 50% 50%,#000 10%,transparent 70%)}
body.offering .object-anatomy{height:auto;flex:1;min-height:0;padding:9% 10% 13%;box-sizing:border-box}
body.offering .anatomy-readout{position:absolute;left:28px;right:28px;bottom:24px;display:flex;align-items:baseline;gap:16px;font-size:13px;letter-spacing:.12em;text-transform:uppercase}
body.offering .readout-count{color:var(--orange);font-weight:600;white-space:nowrap}
body.offering .anatomy-readout strong{font-family:var(--display);font-size:clamp(22px,2vw,30px);font-weight:600;letter-spacing:.02em;line-height:1}
body.offering .spot{position:absolute;left:var(--x);top:var(--y);width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;display:grid;place-items:center;z-index:2;cursor:pointer;transform:translateZ(30px)}
body.offering .spot span{position:relative;z-index:1;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:700;letter-spacing:.02em;color:#fff;background:#0a0a0ecc;border:1px solid #ffffff55;backdrop-filter:blur(6px);transition:transform .35s cubic-bezier(.2,.8,.2,1),background .35s,border-color .35s,color .35s}
body.offering .spot:before{content:'';position:absolute;inset:0;border-radius:50%;border:1px solid var(--orange);opacity:0;transform:scale(.6)}
body.offering .spot.is-active span,body.offering .spot:hover span,body.offering .spot:focus-visible span{transform:scale(1.18);background:var(--orange);border-color:var(--orange);color:#140803;box-shadow:0 0 24px var(--orange)}
body.offering .spot.is-active:before{animation:spot-ping 1.8s ease-out infinite}
@keyframes spot-ping{0%{opacity:.9;transform:scale(.7)}100%{opacity:0;transform:scale(2.3)}}
body.offering .anatomy-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
body.offering .anatomy-card{position:relative;display:grid;grid-template-columns:64px 1fr;gap:8px;padding:30px 30px 32px;border-radius:20px;border:1px solid var(--line);background:#ffffff05;background:light-dark(#ffffffb8,#ffffff05);overflow:hidden;cursor:default;outline:none;transition:border-color .45s,background .45s,transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s;min-height:26svh;align-content:center}
body.offering .anatomy-card:before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--orange) 18%,transparent),transparent 62%);opacity:0;transition:opacity .4s}
body.offering .anatomy-card:hover:before,body.offering .anatomy-card.is-active:before{opacity:1}
body.offering .anatomy-card.is-active,body.offering .anatomy-card:focus-visible{border-color:color-mix(in srgb,var(--orange) 60%,transparent);background:color-mix(in srgb,var(--orange) 5%,transparent);box-shadow:0 30px 60px -30px color-mix(in srgb,var(--orange) 45%,transparent),inset 0 1px 0 #ffffff14;transform:translateX(-6px)}
body.offering .anatomy-card .index{padding-top:6px}
body.offering .anatomy-card h3{font-size:clamp(26px,2.3vw,34px);margin:0 0 10px;transition:color .35s}
body.offering .anatomy-card.is-active h3{color:var(--orange)}
body.offering .anatomy-card p{max-width:44ch;font-size:16px}

/* ---------- Manifesto: words light up as you read ---------- */
body.offering .manifesto{overflow:hidden;isolation:isolate}
body.offering .manifesto:before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 80% 20%,#fff3,transparent 50%),radial-gradient(ellipse at 10% 110%,#0003,transparent 55%)}
body.offering .manifesto-object{position:absolute;z-index:-1;right:6%;top:50%;height:140%;width:auto;max-width:48%;object-fit:contain;transform:translateY(-50%);mix-blend-mode:multiply;filter:grayscale(1) contrast(1.35) brightness(.95);opacity:.62;pointer-events:none}
body.offering.motion-enabled .manifesto h2 .w{opacity:.22;transition:opacity .5s ease}
body.offering.motion-enabled .manifesto h2 .w.lit{opacity:1}

/* ---------- Closing: the object returns, large and cropped ---------- */
body.offering .closing-section.has-object{position:relative;overflow:hidden;isolation:isolate}
body.offering .closing-object{position:absolute;z-index:-1;right:-6%;top:50%;width:min(900px,62vw);height:min(640px,110%);margin-top:calc(min(640px,110%) / -2);pointer-events:none;opacity:.9;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 22%,#000 80%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 22%,#000 80%,transparent 100%)}
body.offering .closing-object .object-frame{perspective:none}
body.offering .closing-object .object-reflection,body.offering .closing-object .object-floor{display:none}
body.offering .closing-section.has-object .wrap{position:relative}
body.offering .closing-section.has-object:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#050508 30%,#050508cc 55%,transparent 85%);background:linear-gradient(90deg,light-dark(#f5f2ec,#050508) 30%,light-dark(#f5f2ecd9,#050508cc) 55%,transparent 85%);pointer-events:none}

/* ---------- Light theme ---------- */
:root[data-theme="light"] body.offering .object-img{filter:drop-shadow(0 26px 30px #2a1e1a40) drop-shadow(0 0 40px color-mix(in srgb,var(--orange) 18%,transparent))}
:root[data-theme="light"] body.offering .object-reflection{opacity:.12}
:root[data-theme="light"] body.offering .object-halo{opacity:.5}
:root[data-theme="light"] body.offering .object-floor{background:radial-gradient(closest-side,#2a1e1a55,transparent 72%)}
:root[data-theme="light"] body.offering .hero-note{box-shadow:0 20px 50px #2a1e1a1c}
:root[data-theme="light"] body.offering .knowledge-tags .tag{box-shadow:0 10px 30px #2a1e1a18}
:root[data-theme="light"] body.offering .hero-reveal h2 .accent{color:color-mix(in srgb,var(--orange) 68%,#2a1200);text-shadow:none}
/* solution.css paints these on a dark surface in both themes; follow the theme instead. */
body.offering .included li{background:#16161b;background:light-dark(#ffffffc8,#16161b)}
:root[data-theme="light"] body.offering .spot span{background:#fffc;color:#141014;border-color:#14101433}

/* ---------- Responsive ---------- */
@media(max-width:1100px){
  body.offering .theme-visual.object-visual,body.offering .hero-stage:has(h1.len-2) .theme-visual.object-visual{width:min(560px,44vw)}
  body.offering .anatomy{gap:36px}
}
@media(max-width:800px){
  body.offering .theme-visual.object-visual,body.offering .hero-stage:has(h1.len-2) .theme-visual.object-visual{position:relative;top:auto;left:auto;transform:none;width:100%;height:min(78vw,380px);margin:12px 0 28px}
  body.offering .hero-sparks,body.offering .hero-cursor-light{display:none}
  body.offering .anatomy{grid-template-columns:1fr}
  body.offering .anatomy-sticky{position:relative;top:auto;height:auto;aspect-ratio:1/1;max-height:none}
  body.offering .object-anatomy{padding:10% 10% 18%}
  body.offering .anatomy-card{grid-template-columns:48px 1fr;padding:22px;min-height:0}
  body.offering .anatomy-card.is-active{transform:none}
  body.offering .closing-object{width:120vw;right:-40vw;opacity:.35}
}
@media(prefers-reduced-motion:reduce){
  body.offering .object-img,body.offering .object-electric{transition:none}
  body.offering .object-sheen:after,body.offering .object-halo,body.offering .hero-ambient,body.offering .note-bars i,body.offering .spot.is-active:before{animation:none}
  body.offering .theme-visual.object-visual{top:63%}
}