/* Penton Systems | Founder: Scott Penton | Orlando, Florida. Designed and engineered under the direction of Scott Penton. Copyright (c) 2026 Scott Penton / Penton Systems. */
/* Home: cinematic introduction overlay, live Earth hero, chapters. */

/* ---------- introduction ---------- */
.intro{position:fixed;inset:0;z-index:2000;background:var(--ink-0);color:var(--fg);overflow:hidden;opacity:1;transition:opacity .8s var(--ease)}
.intro[hidden]{display:none}
.intro.leaving{opacity:0;pointer-events:none}
.intro-stage{position:absolute;inset:0}
.intro-veil{position:absolute;inset:0;background:#020409;opacity:1;pointer-events:none;z-index:2}
.intro-hud{position:absolute;inset:0;z-index:4;pointer-events:none}
.intro-top{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:22px var(--pad)}
.intro-brand{display:flex;align-items:center;gap:12px;font:600 .72rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-2);opacity:.9}
.intro-brand img{height:26px;width:auto}
.intro-ctl{display:flex;gap:6px;pointer-events:auto}
.intro-ctl .mh-btn{background:rgba(2,4,9,.45);border-color:var(--line);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.intro-skip{color:#fff!important;border-color:var(--line-2)!important}
.intro-bottom{position:absolute;left:0;right:0;bottom:0;padding:0 var(--pad) 28px;display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:14px 32px}
.intro-act{display:flex;align-items:baseline;gap:16px;grid-column:1}
.intro-act .n{font:500 .72rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--blue-hi)}
.intro-act .t{font-size:clamp(1.1rem,2vw,1.6rem);font-weight:800;font-stretch:125%;text-transform:uppercase;letter-spacing:-.01em}
.intro-cap{grid-column:2;margin:0;font-size:.95rem;color:var(--fg-2);opacity:0;transform:translateY(8px);transition:opacity 1s var(--ease),transform 1s var(--ease);max-width:52ch}
.intro-cap.in{opacity:1;transform:none}
.intro-tc{grid-column:3;font-size:.72rem;color:var(--fg-3);letter-spacing:.1em}
.intro-progress{grid-column:1/-1;display:grid;grid-template-columns:26fr 27fr 25fr 22fr;gap:6px}
.intro-progress i{--p:0;display:block;height:2px;background:linear-gradient(90deg,var(--blue-hi) calc(var(--p)*100%),rgba(150,180,230,.18) calc(var(--p)*100%))}
.intro-orl{position:absolute;left:0;top:0;opacity:0;transition:opacity .6s;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg);padding-left:12px;border-left:1px solid var(--blue-hi);white-space:nowrap}
.intro-orl b{display:block;color:var(--blue-hi);font-weight:600;margin-top:3px}
.intro-identity{--logo:0;--sheen:0;--word:0;--tag:0;--cta:0;position:absolute;inset:0;z-index:3;display:grid;place-content:center;justify-items:center;text-align:center;gap:0;pointer-events:none;padding:var(--pad)}
.intro-mark{width:min(30vh,40vw);height:auto;opacity:var(--logo);-webkit-mask-image:radial-gradient(circle at 62.4% 43%,#000 calc(var(--logo)*120%),transparent calc(var(--logo)*120% + 14%));mask-image:radial-gradient(circle at 62.4% 43%,#000 calc(var(--logo)*120%),transparent calc(var(--logo)*120% + 14%))}
.intro-word{width:min(46vw,560px);height:auto;margin-top:clamp(18px,3.4vh,34px);clip-path:inset(0 calc((1 - var(--word))*100%) 0 0);opacity:min(1,calc(var(--word)*3))}
.intro-tag{margin:clamp(14px,2.6vh,26px) 0 0;font-size:clamp(1rem,1.7vw,1.35rem);font-weight:500;font-stretch:118%;letter-spacing:.02em;color:var(--fg);opacity:var(--tag);transform:translateY(calc((1 - var(--tag))*14px));text-shadow:0 2px 20px rgba(0,0,0,.8)}
.intro-cta{display:flex;gap:10px;margin-top:clamp(20px,3.6vh,36px);opacity:var(--cta);transform:translateY(calc((1 - var(--cta))*14px));pointer-events:none}
.intro.ended .intro-cta{pointer-events:auto}
.intro-cta [data-replay]{display:none}
.intro.ended .intro-cta [data-replay]{display:inline-flex}
.intro-identity:after{content:"";position:absolute;width:min(30vh,40vw);aspect-ratio:295/270;top:calc(50% - 0px);left:50%;pointer-events:none}
.intro-loader{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;display:none;align-items:center;gap:12px;font:500 .7rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3)}
.intro.loading .intro-loader{display:flex}
.intro-loader span{width:40px;height:1px;background:linear-gradient(90deg,transparent,var(--blue-hi),transparent);background-size:200% 100%;animation:ld 1.2s linear infinite}
@keyframes ld{to{background-position:-200% 0}}
.intro.ended .intro-bottom .intro-cap,.intro.ended .intro-tc{opacity:0}
@media (max-width:700px){.intro-bottom{grid-template-columns:1fr auto}.intro-cap{grid-column:1/-1;grid-row:2}.intro-tc{grid-column:2;grid-row:1}.intro-brand span{display:none}.intro-mark{width:min(34vh,62vw)}.intro-word{width:min(78vw,420px)}}
body.intro-on{overflow:hidden}
body.intro-on .masthead{visibility:hidden}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;isolation:isolate;background:radial-gradient(70% 90% at 78% 40%,rgba(23,60,130,.35),transparent 60%),var(--ink-0)}
.hero-stage{position:absolute;inset:0;z-index:-1}
.hero-fallback{position:absolute;right:-8vw;top:50%;width:min(70vw,900px);aspect-ratio:1;transform:translateY(-50%);z-index:-2;border-radius:50%;background:radial-gradient(circle at 35% 35%,#2b6fd6 0%,#0b3f96 35%,#04122c 65%,transparent 70%);box-shadow:0 0 120px 20px rgba(47,128,255,.25);opacity:.55}
.hero-stage.has-gl~.hero-fallback{display:none}
.hero:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(2,4,9,.92) 0%,rgba(2,4,9,.6) 38%,rgba(2,4,9,0) 62%),linear-gradient(0deg,var(--ink-1) 0%,transparent 22%)}
.hero-inner{padding-top:calc(var(--mh) + 40px);padding-bottom:140px}
.hero-copy{max-width:min(900px,66vw)}
.hero h1{font-size:clamp(2.4rem,4.7vw,6.2rem);font-stretch:112%;margin-bottom:28px}
.hero-replay{margin-top:26px}
.hero-replay button{background:none;border:0;padding:0;cursor:pointer;color:var(--fg-2);font-size:.86rem}
.hero-offer{margin-top:22px;padding:16px 18px;border:1px solid var(--line-2);background:rgba(5,9,18,.7);max-width:520px}
.hero-offer p{margin:0 0 12px;color:var(--fg-2);font-size:.92rem}
.hero-readout{position:absolute;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap;align-items:stretch;border-top:1px solid var(--line);background:linear-gradient(180deg,rgba(5,9,18,0),rgba(5,9,18,.85));-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);max-width:none;padding-top:0;padding-bottom:0}
.hr-item{display:grid;grid-template-columns:auto auto;align-items:center;gap:4px 12px;padding:18px 28px 18px 0;margin-right:28px;border-right:1px solid var(--line)}
.hr-item .k{grid-column:1/-1;font:500 .64rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3)}
.hr-item .v{font-size:1.15rem;font-weight:650;font-stretch:112%}
.hr-item .prov{font-size:.58rem;padding:3px 6px}
.hr-go{margin-left:auto;align-self:center;font:600 .72rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg)}
.hr-go:after{content:" \2192";color:var(--blue-hi)}
@media (max-width:960px){.hero-copy{max-width:100%}.hero:after{background:linear-gradient(0deg,rgba(2,4,9,.95) 0%,rgba(2,4,9,.55) 55%,rgba(2,4,9,.2) 100%)}.hr-go{display:none}.hr-item{padding:14px 16px 14px 0;margin-right:16px}}

/* ---------- experiences list ---------- */
.xp-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2);counter-reset:x}
.xp-list li{border-bottom:1px solid var(--line);position:relative}
.xp-list a{display:grid;grid-template-columns:64px 96px minmax(0,1.1fr) minmax(0,1.3fr) 150px;align-items:center;gap:clamp(16px,2.5vw,40px);padding:clamp(22px,2.6vw,34px) 0;color:var(--fg);text-decoration:none;position:relative}
.xp-list a:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(47,128,255,.12),rgba(47,128,255,0) 70%);opacity:0;transition:opacity .5s var(--ease)}
.xp-list a:hover:before,.xp-list a:focus-visible:before{opacity:1}
.xp-list .n{font:500 .78rem/1 var(--mono);color:var(--blue-hi);letter-spacing:.1em;position:relative}
.xp-list .t{font-size:clamp(1.5rem,3vw,2.9rem);font-weight:800;font-stretch:125%;text-transform:uppercase;letter-spacing:-.025em;line-height:.95;position:relative;transition:transform .6s var(--ease)}
.xp-list a:hover .t{transform:translateX(8px)}
.xp-list .d{color:var(--fg-2);font-size:.98rem;position:relative}
.xp-list .k{justify-self:end;position:relative}
.glyph{width:84px;height:84px;fill:none;stroke:var(--fg-3);stroke-width:1.3;position:relative;transition:stroke .4s}
.glyph .dot{fill:var(--teal);stroke:none}
.glyph .cut{stroke:var(--red)}
.xp-list a:hover .glyph{stroke:var(--blue-hi)}
html[data-motion=on] .xp-list a:hover .glyph .lift{animation:lift 1.6s var(--ease) infinite alternate}
html[data-motion=on] .xp-list a:hover .glyph .dot{animation:blink 1s steps(2) infinite}
@keyframes lift{to{transform:translateY(-8px)}}
@keyframes blink{50%{opacity:.2}}
@media (max-width:1100px){.xp-list a{grid-template-columns:44px 64px 1fr;row-gap:10px}.xp-list .d{grid-column:2/-1}.xp-list .k{grid-column:2/-1;justify-self:start}.glyph{width:60px;height:60px}}

/* ---------- engines ---------- */
.engines-grid{gap:clamp(32px,5vw,90px)}
.engine{border-top:1px solid var(--line-3);padding-top:28px}
.engine-h{font-size:clamp(1.5rem,2.4vw,2.2rem);font-stretch:112%;margin:14px 0 18px;letter-spacing:-.02em}
.engine .deflist{margin-top:26px}
.svc{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.svc li{border-bottom:1px solid var(--line)}
.svc a{display:grid;gap:4px;padding:18px 28px 18px 0;color:var(--fg);text-decoration:none;position:relative}
.svc a:after{content:"\2192";position:absolute;right:4px;top:50%;transform:translateY(-50%);color:var(--fg-3);transition:transform .35s var(--ease),color .3s}
.svc a:hover:after{transform:translate(5px,-50%);color:var(--blue-hi)}
.svc b{font-size:1.08rem;font-stretch:108%}
.svc span{color:var(--fg-2);font-size:.92rem}

/* ---------- live ---------- */
.live-readouts{grid-template-columns:repeat(2,minmax(0,1fr))}
.live-ch{background:radial-gradient(60% 80% at 100% 50%,rgba(34,216,200,.07),transparent 60%)}

/* ---------- founder / claims / cta ---------- */
.founder .display{font-size:clamp(2rem,3.8vw,4.2rem)}
.h-claims{font-size:clamp(1.6rem,3vw,2.8rem);font-stretch:112%;max-width:24ch;margin-bottom:40px}
.final-cta{background:radial-gradient(50% 70% at 50% 100%,rgba(47,128,255,.22),transparent 70%),var(--ink-1)}
.final-cta .mega{font-size:clamp(2.4rem,5.4vw,6rem)}
.hero-inner{pointer-events:none}.hero-copy{pointer-events:auto}
@media (max-width:560px){.hero h1{font-size:clamp(1.75rem,8.2vw,2.5rem)}.final-cta .mega{font-size:clamp(1.9rem,9vw,3rem)}.founder .display{font-size:clamp(1.75rem,8.4vw,2.8rem)}.xp-list .t{font-size:clamp(1.25rem,6.4vw,1.8rem)}}
@media (max-width:560px){.xp-list a{grid-template-columns:36px minmax(0,1fr)}.xp-list .glyph{display:none}.xp-list .t{font-stretch:110%}.xp-list .d,.xp-list .k{grid-column:2}.hero-fallback{right:-30vw;width:90vw}}
@media (pointer:coarse){.hero-stage{pointer-events:none}}
.intro-sound-cue{display:inline-flex;align-items:center;gap:8px;align-self:center;margin-right:6px;font:600 .66rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
.intro-sound-cue:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--teal);animation:livepulse 1.6s ease-in-out infinite}
.intro-sound-cue[hidden]{display:none}
@media (max-width:560px){.intro-sound-cue{font-size:.58rem;letter-spacing:.08em}}