:root{
--bg:#07080C;
--bg-2:#0B0D14;
--card:#101320;
--card-hi:#141829;
--line:rgba(255,255,255,.08);
--line-hi:rgba(255,255,255,.14);
--text:#EEF1F8;
--dim:#8A91A6;
--dim-2:#717891;
--accent:#2FB8FF;
--accent-2:#6E63FF;
--accent-grad:linear-gradient(120deg,#2FB8FF 0%,#6E63FF 100%);
--glow:rgba(47,184,255,.30);
--maxw:1180px;
--ease:cubic-bezier(.22,.61,.36,1);
/* ── fluid spacing ── */
--space-xs:clamp(.25rem,.5vw,.5rem);
--space-sm:clamp(.5rem,1vw,1rem);
--space-md:clamp(1rem,2vw,2rem);
--space-lg:clamp(1.5rem,3vw,3rem);
--space-xl:clamp(2rem,5vw,5rem);
--space-2xl:clamp(3rem,7vw,7rem);
/* ── fluid type ── */
--text-xs:clamp(.65rem,.6rem + .25vw,.8rem);
--text-sm:clamp(.75rem,.7rem + .3vw,.9rem);
--text-base:clamp(.875rem,.8rem + .35vw,1.05rem);
--text-lg:clamp(1rem,.9rem + .5vw,1.25rem);
--text-xl:clamp(1.25rem,1rem + 1vw,1.75rem);
--text-2xl:clamp(1.5rem,1.2rem + 1.5vw,2.5rem);
--text-3xl:clamp(2rem,1.5rem + 2.5vw,3.5rem);
--text-hero:clamp(2.5rem,2rem + 3vw,5rem);
/* ── content widths ── */
--content-max:1200px;
--content-wide:1400px;
--content-narrow:800px;
/* ── safe area insets ── */
--safe-top:env(safe-area-inset-top,0px);
--safe-right:env(safe-area-inset-right,0px);
--safe-bottom:env(safe-area-inset-bottom,0px);
--safe-left:env(safe-area-inset-left,0px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;background-color:var(--bg);overflow-x:hidden}
body{
font-family:'Inter',system-ui,-apple-system,sans-serif;
background-color:transparent;
color:var(--text);
line-height:1.6;
overflow-x:hidden;
overscroll-behavior-y:none;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
svg,canvas{max-width:100%}
::selection{background:rgba(47,184,255,.30);color:#fff}
/* skip link */
.skip-link{
position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip-link:focus-visible{
position:fixed;left:16px;top:16px;z-index:200;width:auto;height:auto;overflow:visible;
background:var(--accent);color:#06080f;font-weight:700;padding:12px 20px;border-radius:8px;
outline:2px solid #fff;outline-offset:2px;
}
/* ambient grain / scanline atmosphere */
body::before{
content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
background:
radial-gradient(ellipse 80% 70% at 50% 50%, transparent 38%, rgba(0,0,0,.08) 100%),
radial-gradient(1100px 700px at 80% -10%, rgba(110,99,255,.08), transparent 60%),
radial-gradient(620px 400px at 8% -4%, rgba(47,184,255,.13), transparent 55%);
}
body::after{
content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.4;
background:repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 3px);
mix-blend-mode:overlay;
}
/* ── Background Video ── */
.bg-video-wrap{
position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none;
}
.bg-video-reel{position:absolute;inset:0;z-index:0}
.bg-video{
position:absolute;top:0;left:0;
width:100%;height:100%;object-fit:cover;
opacity:0;transition:opacity 2.5s ease-in-out;
}
.bg-video--active{opacity:1}
.bg-video--fading{opacity:0}
.bg-video-vignette{
position:absolute;inset:0;z-index:2;pointer-events:none;
background:
radial-gradient(ellipse 120% 100% at 0% 0%,rgba(7,8,12,.75) 0%,rgba(7,8,12,.3) 40%,transparent 70%),
radial-gradient(ellipse 80% 70% at 100% 0%,rgba(7,8,12,.55) 0%,rgba(7,8,12,.15) 45%,transparent 65%),
radial-gradient(ellipse 90% 80% at 0% 100%,rgba(7,8,12,.65) 0%,rgba(7,8,12,.2) 40%,transparent 68%),
radial-gradient(ellipse 70% 60% at 100% 100%,rgba(7,8,12,.45) 0%,rgba(7,8,12,.1) 40%,transparent 60%);
}
.bg-video-overlay{
position:absolute;inset:0;z-index:3;
background:linear-gradient(180deg,
rgba(7,8,12,.55) 0%,
rgba(7,8,12,.70) 35%,
rgba(7,8,12,.85) 70%,
rgba(7,8,12,.92) 100%
);
}
/* ── Section-Aware Watermark ── */
.site-watermark{
position:fixed;
bottom:1.5rem;right:1.75rem;
z-index:50;
pointer-events:none;
}
.site-watermark-text{
position:absolute;
bottom:0;right:0;
font-family:'Space Grotesk',sans-serif;
font-size:1.65rem;font-weight:500;letter-spacing:0.04em;
color:rgba(255,255,255,.12);
white-space:nowrap;
opacity:0;
transition:opacity .6s ease;
-webkit-user-select:none;user-select:none;
}
.site-watermark-text.is-active{opacity:1}
.site-watermark-text[data-watermark="d3d"]{color:rgba(47,184,255,.12)}
.site-watermark-text[data-watermark="tg"]{color:rgba(245,166,35,.12)}
.site-watermark-text[data-watermark="arc"]{color:rgba(90,79,224,.12)}
@media(max-width:768px){
.site-watermark{bottom:1rem;right:1rem}
.site-watermark-text{font-size:1rem}
}
@media(max-width:480px){
.site-watermark{display:none}
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;position:relative;z-index:1}
/* ---------- type system ---------- */
.eyebrow{
font-family:'IBM Plex Mono',monospace;
font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
color:var(--accent);display:inline-flex;align-items:center;gap:.7em;
}
.eyebrow::before{content:"";width:26px;height:1px;background:linear-gradient(90deg,transparent,var(--accent))}
h1,h2,h3{font-family:'Space Grotesk',sans-serif;font-weight:600;line-height:1.05;letter-spacing:-.02em}
.section-title{font-size:clamp(1.9rem,4.2vw,3rem);margin:.55rem 0 1.2rem;max-width:18ch}
.lead{color:var(--dim);font-size:var(--text-base);max-width:54ch}
/* ---------- nav ---------- */
header{
position:fixed;top:0;left:0;right:0;z-index:50;
padding-top:var(--safe-top);padding-left:var(--safe-left);padding-right:var(--safe-right);
transition:background .35s var(--ease),border-color .35s var(--ease),backdrop-filter .35s,box-shadow .35s var(--ease),
transform .4s cubic-bezier(.4,0,.2,1),opacity .3s ease;
border-bottom:1px solid transparent;
}
header.scrolled{
background:rgba(7,8,12,.72);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
border-bottom:1px solid var(--line);
box-shadow:0 1px 0 rgba(47,184,255,.04),0 2px 20px rgba(47,184,255,.04);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
section[id]{scroll-margin-top:calc(72px + var(--safe-top))}
#contact{
content-visibility:auto;
contain-intrinsic-size:auto 800px;
}
.logo{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.18rem;letter-spacing:-.02em;display:flex;align-items:center;gap:.1em}
.logo .d3{
background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
margin-left:.08em;position:relative;
}
.logo .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--glow);margin-right:.6em}
.nav-links{display:flex;gap:34px;align-items:center}
.nav-links a{
font-size:.9rem;color:var(--dim);font-weight:500;position:relative;padding:4px 0;transition:color .25s;
}
.nav-links a::after{
content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;background:var(--accent);
box-shadow:0 0 8px var(--glow);transition:width .3s var(--ease);
}
.nav-links a:hover{color:var(--accent)}
.nav-links a:hover::after{width:100%}
.nav-cta{
font-size:.85rem;font-weight:600;color:var(--text);border:1px solid var(--line-hi);
padding:9px 18px;border-radius:8px;transition:all .25s var(--ease);
}
.nav-cta:hover{border-color:var(--accent);box-shadow:0 0 24px -6px var(--glow);color:#fff}
.burger{display:none;background:none;border:0;cursor:pointer;width:40px;height:40px;flex-direction:column;justify-content:center;gap:5px;align-items:flex-end}
.burger span{display:block;width:24px;height:2px;background:var(--text);transition:.3s var(--ease)}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){width:24px;transform:translateY(-7px) rotate(-45deg)}
/* ---------- nav lockup ---------- */
.nav-lockup{display:flex;align-items:center;gap:.5rem;margin-right:auto;margin-left:0}
.nav-lockup-tab{
background:none;border:none;
font-family:'Space Grotesk',sans-serif;
font-size:1.18rem;font-weight:700;letter-spacing:-.02em;
color:var(--dim);cursor:pointer;
padding:6px 16px;position:relative;
border-radius:9999px;overflow:hidden;
transition:color .5s ease;
}
.nav-lockup-tab .lockup-short{
display:inline-block;max-width:5ch;overflow:hidden;white-space:nowrap;
opacity:1;
transition:max-width .6s cubic-bezier(.25,.46,.45,.94),opacity .5s ease;
}
.nav-lockup-tab .lockup-full{
display:inline-block;max-width:0;overflow:hidden;white-space:nowrap;
opacity:0;
transition:max-width .6s cubic-bezier(.25,.46,.45,.94),opacity .5s ease;
}
.nav-lockup-tab[aria-pressed="true"] .lockup-short{max-width:0;opacity:0}
.nav-lockup-tab[aria-pressed="true"] .lockup-full{max-width:22ch;opacity:1}
.nav-lockup-tab[data-entity="d3d"][aria-pressed="true"]{color:#2FB8FF;text-shadow:0 0 16px rgba(47,184,255,.45),0 0 40px rgba(47,184,255,.15)}
.nav-lockup-tab[data-entity="ringo"][aria-pressed="true"]{color:#F5A623;text-shadow:0 0 16px rgba(245,166,35,.45),0 0 40px rgba(245,166,35,.15)}
.nav-lockup-tab[data-entity="arc"][aria-pressed="true"]{color:#5A4FE0;text-shadow:0 0 16px rgba(90,79,224,.45),0 0 40px rgba(90,79,224,.15)}
.lockup-sep{color:var(--dim-2);font-size:.7rem;-webkit-user-select:none;user-select:none}
.nav-lockup-tab:not([aria-pressed="true"]):hover{color:var(--text);transition:color .3s ease}
/* entity ambient glows — always visible, independent of hover/active */
.nav-lockup-tab[data-entity="d3d"]:not([aria-pressed="true"]){color:rgba(47,184,255,.6);text-shadow:0 0 12px rgba(47,184,255,.15)}
.nav-lockup-tab[data-entity="d3d"]:not([aria-pressed="true"]):hover{color:rgba(47,184,255,.85);text-shadow:0 0 14px rgba(47,184,255,.25)}
.nav-lockup-tab[data-entity="ringo"]:not([aria-pressed="true"]){color:rgba(245,166,35,.6);text-shadow:0 0 12px rgba(245,166,35,.15)}
.nav-lockup-tab[data-entity="ringo"]:not([aria-pressed="true"]):hover{color:#F5A623;text-shadow:0 0 14px rgba(245,166,35,.3)}
.nav-lockup-tab[data-entity="arc"]:not([aria-pressed="true"]){color:rgba(90,79,224,.6);text-shadow:0 0 12px rgba(90,79,224,.15)}
.nav-lockup-tab[data-entity="arc"]:not([aria-pressed="true"]):hover{color:#5A4FE0;text-shadow:0 0 14px rgba(90,79,224,.3)}
.nav-lockup-tab[aria-pressed="true"] .lockup-full .lbl-white{color:var(--text);text-shadow:none}
/* ---------- buttons ---------- */
.btn{
display:inline-flex;align-items:center;gap:.6em;font-weight:600;font-size:.95rem;
padding:14px 26px;border-radius:9999px;cursor:pointer;border:1px solid transparent;
flex-shrink:0;flex-grow:0;
transition:box-shadow .3s var(--ease),background .3s,border-color .3s;
font-family:'Inter',sans-serif;
}
.btn-primary{background:var(--accent-grad);color:#06080f;box-shadow:0 8px 30px -10px var(--glow)}
.btn-primary:hover{box-shadow:0 14px 40px -8px var(--glow)}
.btn-ghost{border-color:var(--line-hi);color:var(--text);background:rgba(255,255,255,.02)}
.btn-ghost:hover{border-color:var(--accent);box-shadow:0 0 30px -10px var(--glow)}
.btn svg{width:16px;height:16px}
/* ── Hero CTA Buttons — cinematic glow + violet border ── */
.hero-actions .btn{
position:relative;
overflow:hidden;
isolation:isolate;
}
.hero-actions .btn-primary{
border:1.5px solid rgba(90,79,224,.6);
box-shadow:0 0 20px rgba(47,184,255,.35),0 0 40px rgba(47,184,255,.15);
transition:box-shadow .4s ease,border-color .4s ease,background .3s;
}
.hero-actions .btn-primary:hover{
border-color:#5A4FE0;
box-shadow:0 0 28px rgba(47,184,255,.5),0 0 50px rgba(47,184,255,.25);
}
.hero-actions .cta-border-wrap{
background:transparent;
padding:0;
animation:none;
}
.hero-actions .cta-border-wrap::after{display:none}
.hero-actions .cta-border-wrap > .btn,
.hero-actions .cta-border-wrap > .btn:hover{
background:rgba(255,255,255,.02);
border:1.5px solid rgba(90,79,224,.6);
box-shadow:0 0 20px rgba(47,184,255,.35),0 0 40px rgba(47,184,255,.15);
transition:box-shadow .4s ease,border-color .4s ease;
}
.hero-actions .cta-border-wrap > .btn:hover{
border-color:#5A4FE0;
box-shadow:0 0 28px rgba(47,184,255,.5),0 0 50px rgba(47,184,255,.25);
}
/* ---------- hero ---------- */
.hero{
position:relative;min-height:100vh;min-height:100dvh;overflow:hidden;
display:flex;flex-direction:column;align-items:center;justify-content:center;
padding:120px 0 80px;
}
.hero::before{
content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background:
radial-gradient(ellipse 70% 55% at 15% 50%, rgba(47,184,255,.09) 0%, transparent 65%),
radial-gradient(ellipse 55% 65% at 85% 25%, rgba(110,99,255,.10) 0%, transparent 60%),
radial-gradient(ellipse 45% 50% at 55% 85%, rgba(47,184,255,.06) 0%, transparent 55%),
radial-gradient(ellipse 60% 45% at 40% 10%, rgba(110,99,255,.08) 0%, transparent 60%);
animation:hero-drift 22s ease-in-out infinite alternate;
}
.hero::after{
content:"";position:absolute;z-index:0;pointer-events:none;
left:20%;top:72%;width:60%;height:1px;
background:linear-gradient(90deg,transparent 0%,rgba(47,184,255,.22) 30%,rgba(110,99,255,.18) 65%,transparent 100%);
opacity:.45;
}
.hero-atmo{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero-atmo::before{
content:"";position:absolute;left:50%;top:50%;width:160%;aspect-ratio:1;
transform:translate(-50%,-50%);
background:conic-gradient(from 0deg,
transparent,rgba(47,184,255,.12),transparent 35%,
rgba(110,99,255,.16),transparent 65%);
animation:spin 40s linear infinite;filter:blur(80px);opacity:.55;
}
.hero-atmo::after{
content:"";position:absolute;inset:0;
background:
radial-gradient(ellipse 80% 60% at 50% 40%, rgba(47,184,255,.06), transparent 60%),
radial-gradient(ellipse 55% 80% at 15% 75%, rgba(110,99,255,.07), transparent 55%),
radial-gradient(ellipse 50% 55% at 85% 20%, rgba(47,184,255,.05), transparent 52%);
}
.hero-content{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center}
.hero h1{font-size:clamp(2.8rem,6.5vw,5.2rem);font-weight:700;letter-spacing:-.04em;line-height:1.0}
.hero-sub{color:var(--dim);font-size:var(--text-lg);margin:1.4rem 0 2rem;max-width:46ch;font-weight:400;text-align:center}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;align-items:center}
.hero-play{
position:relative;z-index:2;margin-top:3.2rem;
width:76px;height:76px;border-radius:50%;
background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:grid;place-items:center;
cursor:pointer;color:var(--text);
transition:transform .35s var(--ease),box-shadow .35s,background .35s,border-color .35s;
will-change:filter,transform;
}
.hero-play:hover{
transform:scale(1.1);background:rgba(47,184,255,.1);
border-color:rgba(47,184,255,.4);box-shadow:0 0 60px -10px var(--glow);
animation:playGlitch .5s infinite,playGlitchShadow .5s infinite,circleGlitch .6s infinite,playGlitchRotate .7s infinite;
}
.hero-play svg{width:22px;height:22px;margin-left:3px}
.hero-play:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
/* ── Hero Play Button — Glitch Effect ── */
@keyframes playGlitch {
0%, 88%, 100% {
filter: none;
translate: 0 0;
opacity: 1;
}
89% {
filter: blur(1.5px) saturate(1.8);
translate: -1px 0;
opacity: 0.85;
}
90% {
filter: blur(0px) saturate(2.5) hue-rotate(15deg);
translate: 2px -1px;
opacity: 1;
}
91% {
filter: blur(2px) brightness(1.3);
translate: 0 1px;
opacity: 0.7;
}
92% {
filter: none;
translate: 0 0;
opacity: 1;
}
}
@keyframes playGlitchShadow {
0%, 88%, 100% {
box-shadow: 0 0 15px rgba(47, 184, 255, 0.08), 0 0 30px rgba(47, 184, 255, 0.04);
}
89% {
box-shadow: 0 0 20px rgba(47, 184, 255, 0.25), -3px 0 15px rgba(110, 99, 255, 0.15), 3px 0 15px rgba(47, 184, 255, 0.15);
}
91% {
box-shadow: 0 0 25px rgba(47, 184, 255, 0.3), 0 0 40px rgba(110, 99, 255, 0.1);
}
92% {
box-shadow: 0 0 15px rgba(47, 184, 255, 0.08), 0 0 30px rgba(47, 184, 255, 0.04);
}
}
/* ── Hero Play Button — Circle Border Glitch ── */
@keyframes circleGlitch {
0%, 100% {
border-color: rgba(47,184,255,.4);
clip-path: inset(0 round 50%);
scale: 1;
box-shadow: 0 0 60px -10px var(--glow);
}
14% {
border-color: #6E63FF;
clip-path: inset(10% 0 80% 0);
scale: 1.02;
box-shadow: 0 0 12px var(--accent,#2FB8FF), 0 0 60px -10px var(--glow);
}
16% {
border-color: rgba(47,184,255,.3);
clip-path: inset(0 round 50%);
scale: 0.99;
box-shadow: 0 0 60px -10px var(--glow);
}
52% {
border-color: rgba(47,184,255,.4);
clip-path: inset(0 round 50%);
scale: 0.98;
box-shadow: 0 0 60px -10px var(--glow);
}
54% {
border-color: var(--accent,#2FB8FF);
clip-path: inset(20% 0 60% 0);
scale: 1.01;
box-shadow: 0 0 12px var(--accent,#2FB8FF), 0 0 60px -10px var(--glow);
}
56% {
border-color: #6E63FF;
clip-path: inset(0 round 50%);
scale: 1;
box-shadow: 0 0 60px -10px var(--glow);
}
}
@keyframes playGlitchRotate{
0%{rotate:0deg}
18%{rotate:.5deg}
36%{rotate:-.8deg}
52%{rotate:.3deg}
70%{rotate:-.4deg}
85%{rotate:.2deg}
100%{rotate:0deg}
}
.hero-play.glitch-pulse{
animation:playGlitch .5s infinite,playGlitchShadow .5s infinite,circleGlitch .6s infinite,playGlitchRotate .7s infinite;
}
.hero-proof{
font-family:'IBM Plex Mono',monospace;
font-size:.8rem;font-weight:400;letter-spacing:.08em;text-transform:uppercase;
color:var(--dim);margin-top:2rem;text-align:center;
text-shadow:0 0 20px rgba(47,184,255,.1);
}
/* ── TRC Countdown Module ── */
.trc-countdown-module{
text-align:center;
margin-top:1.5rem;
}
.trc-countdown-label{
font-family:'IBM Plex Mono',monospace;
font-size:0.75rem;
letter-spacing:0.18em;
text-transform:uppercase;
color:var(--dim);
margin-bottom:0.75rem;
}
.trc-countdown-display{
display:inline-flex;
gap:1.5rem;
align-items:center;
}
.trc-unit{
display:flex;
flex-direction:column;
align-items:center;
min-width:3.5rem;
}
.trc-value{
font-family:'Space Grotesk',sans-serif;
font-size:clamp(1.75rem,3vw,2.5rem);
font-weight:700;
color:var(--text);
line-height:1;
text-shadow:0 0 20px rgba(47,184,255,0.15);
}
.trc-unit-label{
font-family:'IBM Plex Mono',monospace;
font-size:0.65rem;
letter-spacing:0.15em;
color:var(--dim-2);
margin-top:0.25rem;
}
/* ---------- generic section ---------- */
section{padding:96px 0;position:relative}
.divider{
height:1px;
background:
linear-gradient(90deg,transparent 0%,rgba(47,184,255,.06) 38%,rgba(47,184,255,.06) 62%,transparent 100%),
linear-gradient(90deg,transparent 0%,var(--line-hi) 22%,var(--line-hi) 78%,transparent 100%);
box-shadow:0 0 16px rgba(47,184,255,.04);
max-width:var(--maxw);margin:0 auto;
}
/* cta links */
.view-link{display:inline-flex;align-items:center;gap:.5em;font-size:.88rem;font-weight:600;color:var(--text);transition:gap .25s var(--ease),color .25s}
.view-link svg{width:15px;height:15px;transition:transform .4s cubic-bezier(.22,1.25,.58,1)}
.view-link:hover{color:var(--accent)}
.view-link:hover svg{transform:translateX(5px)}
/* made */
.made-tagline{
font-family:'Space Grotesk',sans-serif;
font-size:clamp(1.05rem,2vw,1.25rem);
font-style:italic;font-weight:500;
background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
margin-bottom:1.8rem;letter-spacing:-.01em;
}
#made .made-tagline{
max-width:34rem;
margin-bottom:1.25rem;
}
#made .lead{
max-width:42rem;
}
.film-strip{
border:1px solid var(--line-hi);border-radius:8px;overflow:hidden;
background:#030407;position:relative;margin-top:52px;
}
.film-strip::after{
content:"";position:absolute;inset:0;pointer-events:none;z-index:10;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),inset 0 3px 30px rgba(0,0,0,.45);
}
.filmstrip-note,.ringo-preview-disclaimer,.reel-disclaimer{
margin-top:14px;
font-family:'IBM Plex Mono',monospace;
font-size:.72rem;
letter-spacing:.08em;
color:var(--dim-2);
text-align:center;
max-width:100%;
overflow-wrap:anywhere;
}
.ringo-preview-disclaimer,.reel-disclaimer{
margin:0.85rem 0 1.25rem;
padding:0.75rem 0.9rem;
border:1px solid rgba(255,154,43,0.32);
background:rgba(255,154,43,0.06);
color:rgba(245,247,255,0.82);
font-size:0.88rem;
line-height:1.55;
letter-spacing:0.01em;
max-width:42rem;
}
.reel-disclaimer{
margin-top:0.85rem;
text-align:center;
}
@media(max-width:768px){
.filmstrip-note{font-size:.68rem}
.ringo-preview-disclaimer,.reel-disclaimer{font-size:0.82rem;padding:0.7rem 0.8rem}
}
@media(max-width:480px){
.ringo-preview-disclaimer,.reel-disclaimer{font-size:0.78rem;line-height:1.5;padding:0.65rem 0.7rem}
}
.film-perfs{
height:20px;background-color:#030407;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='18'%3E%3Crect x='4' y='4' width='14' height='9' rx='2' fill='%23fff' fill-opacity='.09'/%3E%3C/svg%3E");
background-size:22px 18px;background-repeat:repeat-x;background-position:center;
}
.film-panels{
display:grid;grid-template-columns:repeat(3,1fr);
gap:2px;background:#020305;
}
.film-panel{
position:relative;aspect-ratio:16/9;overflow:hidden;
background:#08090f;isolation:isolate;
}
.panel-atmo{position:absolute;inset:0;z-index:1;pointer-events:none}
.panel-atmo--1{
background:
radial-gradient(ellipse 80% 70% at 22% 32%,rgba(47,184,255,.22) 0%,transparent 60%),
radial-gradient(ellipse 60% 80% at 85% 78%,rgba(110,99,255,.18) 0%,transparent 55%),
radial-gradient(ellipse 45% 45% at 52% 55%,rgba(47,184,255,.07) 0%,transparent 50%);
animation:panel-pulse 9s ease-in-out infinite;
}
.panel-atmo--2{
background:
radial-gradient(ellipse 85% 65% at 74% 24%,rgba(110,99,255,.26) 0%,transparent 60%),
radial-gradient(ellipse 65% 75% at 18% 76%,rgba(47,184,255,.16) 0%,transparent 55%),
radial-gradient(ellipse 50% 45% at 40% 44%,rgba(110,99,255,.09) 0%,transparent 50%);
animation:panel-pulse 11s ease-in-out infinite;
animation-delay:-3.5s;
}
.panel-atmo--3{
background:
radial-gradient(ellipse 70% 80% at 50% 18%,rgba(110,99,255,.22) 0%,transparent 60%),
radial-gradient(ellipse 80% 55% at 10% 82%,rgba(47,184,255,.20) 0%,transparent 55%),
radial-gradient(ellipse 55% 55% at 88% 50%,rgba(47,184,255,.14) 0%,transparent 50%);
animation:panel-pulse 13s ease-in-out infinite;
animation-delay:-6s;
}
.panel-grain{
position:absolute;inset:0;z-index:2;pointer-events:none;
background:
repeating-linear-gradient(0deg,transparent 0 2px,rgba(255,255,255,.013) 2px 3px),
repeating-linear-gradient(87deg,transparent 0 2px,rgba(255,255,255,.008) 2px 3px);
mix-blend-mode:overlay;opacity:.55;
}
.panel-sweep{
position:absolute;inset:0;z-index:3;pointer-events:none;
background:linear-gradient(115deg,
transparent 18%,rgba(255,255,255,.022) 38%,
rgba(47,184,255,.055) 50%,rgba(255,255,255,.018) 62%,transparent 82%
);
transform:translateX(-150%) skewX(-5deg);
animation:shimmer 14s linear infinite;
}
.panel-sweep--2{animation-delay:-4.7s}
.panel-sweep--3{animation-delay:-9.3s}
.panel-label{
position:absolute;bottom:14px;left:14px;z-index:4;
font-family:'IBM Plex Mono',monospace;font-size:.62rem;
letter-spacing:.22em;text-transform:uppercase;color:var(--dim);
background:rgba(7,8,12,.58);padding:5px 10px;border-radius:5px;
border:1px solid rgba(255,255,255,.09);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.made-cta{margin-top:36px}
/* Batch024K — keep Made text stable; do not use hover underlines on text rows. */
#made .lead,
#made .made-tagline,
#made .reveal-text{
position:relative;
z-index:1;
cursor:default;
overflow:visible!important;
opacity:1!important;
visibility:visible!important;
clip-path:none!important;
-webkit-mask-image:none!important;
mask-image:none!important;
filter:none!important;
mix-blend-mode:normal;
-webkit-user-select:none;
user-select:none;
}
#made .lead,
#made .reveal-text{
background:none!important;
box-shadow:none!important;
text-decoration:none!important;
transform:none!important;
transition:none!important;
}
#made .lead:hover,
#made .lead:focus-visible,
#made .lead:active,
#made .lead.is-hovering,
#made .lead.is-active,
#made .reveal-text:hover,
#made .reveal-text:focus-visible,
#made .reveal-text:active,
#made .reveal-text.is-hovering,
#made .reveal-text.is-active{
background:none!important;
box-shadow:none!important;
opacity:1!important;
visibility:visible!important;
transform:none!important;
filter:none!important;
clip-path:none!important;
}
#made .reveal-text .reveal-word{
overflow:visible!important;
opacity:1!important;
visibility:visible!important;
transform:none!important;
filter:none!important;
transition:none!important;
clip-path:none!important;
-webkit-mask-image:none!important;
mask-image:none!important;
}
#made .made-tagline,
#made .made-tagline:hover,
#made .made-tagline:focus-visible,
#made .made-tagline:active,
#made .made-tagline.is-hovering,
#made .made-tagline.is-active{
background:var(--accent-grad)!important;
-webkit-background-clip:text!important;
background-clip:text!important;
color:transparent!important;
box-shadow:none!important;
opacity:1!important;
visibility:visible!important;
transform:none!important;
filter:none!important;
clip-path:none!important;
}
#made .lead::selection,
#made .made-tagline::selection,
#made .reveal-text::selection,
#made .reveal-word::selection{
background:transparent;
color:inherit;
}
/* ===== 6-Frame Interactive Reel (Prompt 6 — skeleton) ===== */
.reel-strip{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:1rem;
width:100%;
padding:1rem;
}
.reel-frame{
position:relative;
display:block;
width:100%;
aspect-ratio:16/9;
padding:0;margin:0;border:0;
background:transparent;
cursor:pointer;
overflow:hidden;
border-radius:4px;
font:inherit;color:inherit;text-align:left;
}
.reel-frame-media{
position:absolute;inset:0;
z-index:0;overflow:hidden;
background-color:#11161d;
background:color-mix(in srgb,var(--accent) 14%,#0a0a0f);
transition:background .4s ease,filter .4s ease;
}
.preview-tile-video{
position:absolute;inset:0;
width:100%;height:100%;
display:block;object-fit:cover;
border:0;background:#030407;
pointer-events:none;
-webkit-user-select:none;user-select:none;
transform:scale(1.01);
transition:filter .35s ease,opacity .35s ease,transform .35s ease;
}
.reel-frame .preview-tile-video{
opacity:.82;
filter:brightness(.72) saturate(.95) contrast(1.04);
}
.reel-frame-sprockets{
position:absolute;left:0;width:100%;height:20px;
background-color:#030407;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='18'%3E%3Crect x='4' y='4' width='14' height='9' rx='2' fill='%23fff' fill-opacity='.09'/%3E%3C/svg%3E");
background-size:22px 18px;background-repeat:repeat-x;background-position:center;
pointer-events:none;z-index:2;
}
.reel-frame-sprockets--top{top:0}
.reel-frame-sprockets--bottom{bottom:0}
.reel-frame-label{
position:absolute;left:.75rem;bottom:.75rem;z-index:3;
font-family:'IBM Plex Mono',monospace;
font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
color:var(--dim);
background:rgba(7,8,12,.58);padding:5px 10px;border-radius:5px;
border:1px solid rgba(255,255,255,.09);
-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.reel-frame:focus-visible{
outline:2px solid var(--accent);
outline-offset:2px;
}
@media(max-width:768px){
.reel-strip{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:480px){
.reel-strip{grid-template-columns:1fr}
}
/* ===== Reel Hover System (Prompt 7) ===== */
/* Spotlight: radial reveal that follows the cursor (var-driven position).
mix-blend-mode: screen brightens the subdued media beneath it. */
.reel-frame-spotlight{
position:absolute;
inset:0;
z-index:1;
opacity:0;
transition:opacity .35s ease;
pointer-events:none;
mix-blend-mode:screen;
background:radial-gradient(
circle 140px at var(--reel-mx, 50%) var(--reel-my, 50%),
color-mix(in srgb, var(--accent, #2FB8FF) 55%, transparent) 0%,
color-mix(in srgb, var(--accent, #2FB8FF) 22%, transparent) 40%,
transparent 70%
);
}
.reel-frame.is-hovering .reel-frame-spotlight,
.reel-frame:hover .reel-frame-spotlight,
.reel-frame:focus-visible .reel-frame-spotlight{opacity:1;}
/* Brighten the placeholder media slightly while hovering (exposure feel) */
.reel-frame.is-hovering .reel-frame-media,
.reel-frame:hover .reel-frame-media,
.reel-frame:focus-visible .reel-frame-media{
filter:brightness(1.25) saturate(1.1);
}
.reel-frame.is-hovering .preview-tile-video,
.reel-frame:hover .preview-tile-video,
.reel-frame:focus-visible .preview-tile-video{
opacity:.98;
filter:brightness(1.16) saturate(1.12) contrast(1.04);
}
/* Grain overlay — tiled fractal noise, low opacity. Animates position while
hovering for a living-film shimmer. MEDIUM intensity. */
.reel-frame-grain{
position:absolute;
inset:-50%;
z-index:2;
opacity:0;
pointer-events:none;
mix-blend-mode:overlay;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
background-size:160px 160px;
transition:opacity .35s ease;
}
.reel-frame.is-hovering .reel-frame-grain,
.reel-frame:hover .reel-frame-grain,
.reel-frame:focus-visible .reel-frame-grain{
opacity:.14;
animation:reelGrainShift .5s steps(3) infinite;
}
/* Gate weave — subtle 1px frame jitter, classic projector instability.
Applied to media element. MEDIUM = ~1px. */
.reel-frame.is-hovering .reel-frame-media,
.reel-frame:hover .reel-frame-media,
.reel-frame:focus-visible .reel-frame-media{
animation:reelGateWeave 2.4s ease-in-out infinite,
reelFlicker 3.1s steps(1) infinite;
}
/* Large overlay word — hidden at rest, GLITCH-IN on hover. */
.reel-frame-word{
position:absolute;
inset:0;
z-index:4;
display:flex;
align-items:center;
justify-content:center;
pointer-events:none;
font-family:'Space Grotesk',sans-serif;
font-weight:700;
font-size:clamp(1.4rem, 3.2vw, 2.4rem);
letter-spacing:.12em;
color:#fff;
text-shadow:0 2px 12px rgba(0,0,0,.7);
opacity:0;
will-change:filter,transform,opacity;
}
.reel-frame.is-hovering .reel-frame-word,
.reel-frame:hover .reel-frame-word,
.reel-frame:focus-visible .reel-frame-word{
animation:reelWordGlitchIn .45s steps(2, end) forwards;
}
/* ---- Keyframes ---- */
@keyframes reelGrainShift{
0% {transform:translate(0,0);}
33% {transform:translate(-4%,2%);}
66% {transform:translate(3%,-3%);}
100%{transform:translate(0,0);}
}
@keyframes reelGateWeave{
0%,100%{transform:translate(0,0);}
25% {transform:translate(0.6px,-0.5px);}
50% {transform:translate(-0.5px,0.6px);}
75% {transform:translate(0.4px,0.4px);}
}
@keyframes reelFlicker{
0%,100%{filter:brightness(1.25) saturate(1.1);}
50% {filter:brightness(1.32) saturate(1.12);}
}
@keyframes reelWordGlitchIn{
0% {opacity:0; filter:blur(6px) hue-rotate(40deg) brightness(1.6); transform:translate(-3px,2px) skewX(-4deg);}
35% {opacity:.9; filter:blur(2px) hue-rotate(-20deg) brightness(1.3); transform:translate(2px,-1px) skewX(3deg);}
60% {opacity:.75; filter:blur(3px) hue-rotate(15deg) brightness(1.4); transform:translate(-1px,1px) skewX(-2deg);}
100%{opacity:1; filter:blur(0) hue-rotate(0) brightness(1); transform:translate(0,0) skewX(0);}
}
/* ---- Reduced motion: kill all film motion, keep calm static reveal ---- */
@media(prefers-reduced-motion:reduce){
.reel-frame.is-hovering .reel-frame-grain,.reel-frame:hover .reel-frame-grain,.reel-frame:focus-visible .reel-frame-grain{animation:none;opacity:.08;}
.reel-frame.is-hovering .reel-frame-media,.reel-frame:hover .reel-frame-media,.reel-frame:focus-visible .reel-frame-media{animation:none;filter:brightness(1.2) saturate(1.1);}
.reel-frame.is-hovering .reel-frame-word,.reel-frame:hover .reel-frame-word,.reel-frame:focus-visible .reel-frame-word {animation:none;opacity:1;filter:none;transform:none;}
.reel-frame-word{transition:opacity .3s ease;}
}
@keyframes panel-pulse{
0%,100%{opacity:1}
50%{opacity:.78}
}
/* empowered */
.ringo-trailer{
position:relative;aspect-ratio:21/9;overflow:hidden;
background:
linear-gradient(180deg,rgba(3,4,7,.96),rgba(8,10,16,.98) 58%,rgba(2,3,5,.98)),
radial-gradient(ellipse 80% 100% at 50% 45%,rgba(245,166,35,.08),transparent 58%);
border:1px solid rgba(245,166,35,.18);border-radius:8px;
margin-top:48px;isolation:isolate;
cursor:pointer;
box-shadow:0 28px 90px rgba(0,0,0,.42),0 0 52px rgba(245,166,35,.05);
}
.ringo-trailer:focus-visible{
outline:2px solid rgba(245,166,35,.85);
outline-offset:4px;
}
@supports not (aspect-ratio: 1){
.ringo-trailer{padding-top:calc(9 / 21 * 100%)}
}
.ringo-trailer::before{
content:"";position:absolute;inset:12px;z-index:6;pointer-events:none;
border:1px solid rgba(255,255,255,.055);
background:
linear-gradient(90deg,rgba(255,255,255,.08),transparent 22%,transparent 78%,rgba(255,255,255,.06)),
linear-gradient(0deg,transparent 47%,rgba(245,166,35,.18) 50%,transparent 53%);
opacity:.36;
clip-path:polygon(0 0,38% 0,38% 1px,62% 1px,62% 0,100% 0,100% 100%,64% 100%,64% calc(100% - 1px),36% calc(100% - 1px),36% 100%,0 100%);
}
.ringo-trailer::after{
content:"";position:absolute;inset:0;z-index:10;pointer-events:none;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),inset 0 0 80px rgba(0,0,0,.72);
}
.trailer-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:none}
.ringo-trailer .preview-tile-video{
opacity:.68;
filter:brightness(.66) saturate(.92) contrast(1.06);
}
.trailer-atmo{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.trailer-atmo::before{
content:"";position:absolute;left:50%;top:50%;width:118%;aspect-ratio:1;
transform:translate(-50%,-50%) rotate(0deg);
background:conic-gradient(from 0deg,
transparent,rgba(245,166,35,.13),transparent 30%,
rgba(47,184,255,.08),transparent 58%,
rgba(245,166,35,.07),transparent);
animation:spin 64s linear infinite;filter:blur(62px);opacity:.58;
}
.trailer-atmo::after{
content:"";position:absolute;inset:0;
background:
radial-gradient(ellipse 70% 90% at 18% 52%,rgba(245,166,35,.12),transparent 62%),
radial-gradient(ellipse 70% 80% at 82% 45%,rgba(47,184,255,.08),transparent 60%),
linear-gradient(90deg,rgba(245,166,35,.07),transparent 26%,transparent 74%,rgba(47,184,255,.05));
animation:panel-pulse 9s ease-in-out infinite;
}
.trailer-grain{
position:absolute;inset:0;z-index:2;pointer-events:none;
background:
repeating-linear-gradient(0deg,transparent 0 2px,rgba(255,255,255,.018) 2px 3px),
repeating-linear-gradient(90deg,transparent 0 42px,rgba(245,166,35,.035) 42px 43px),
repeating-linear-gradient(87deg,transparent 0 2px,rgba(255,255,255,.006) 2px 3px);
mix-blend-mode:overlay;opacity:.42;
}
.trailer-sweep{
position:absolute;inset:0;z-index:3;pointer-events:none;
background:linear-gradient(110deg,
transparent 15%,rgba(255,255,255,.018) 35%,
rgba(245,166,35,.08) 50%,rgba(47,184,255,.035) 62%,transparent 85%
);
transform:translateX(-150%) skewX(-5deg);
animation:shimmer 22s linear infinite;
animation-delay:-6s;
}
.trailer-vignette{
position:absolute;inset:0;z-index:4;pointer-events:none;
background:
linear-gradient(0deg,rgba(0,0,0,.32),transparent 18%,transparent 82%,rgba(0,0,0,.34)),
radial-gradient(ellipse 75% 75% at 50% 50%,transparent 42%,rgba(3,4,7,.78) 100%);
}
.trailer-center{
position:absolute;inset:0;z-index:5;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
}
.trailer-center::before{
content:"";position:absolute;left:18%;right:18%;top:50%;height:1px;pointer-events:none;
background:linear-gradient(90deg,transparent,rgba(245,166,35,.24),rgba(47,184,255,.12),transparent);
opacity:.48;
}
.trailer-play{
position:relative;overflow:visible;
width:78px;height:78px;border-radius:50%;
background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:grid;place-items:center;color:var(--text);
box-shadow:0 0 34px rgba(245,166,35,.08),0 0 70px rgba(0,0,0,.34);
transition:transform .35s var(--ease),background .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.trailer-play::before,
.trailer-play::after{
content:"";position:absolute;inset:-3px;border-radius:50%;pointer-events:none;opacity:.44;
border:1px solid rgba(245,166,35,.5);
box-shadow:0 0 18px rgba(245,166,35,.18),0 0 34px rgba(47,184,255,.08);
}
.trailer-play::after{
inset:-7px;border-color:rgba(47,184,255,.28);opacity:.28;
}
.ringo-trailer:hover .trailer-play{
transform:scale(1.045);background:rgba(245,166,35,.075);
border-color:rgba(245,166,35,.34);box-shadow:0 0 50px rgba(245,166,35,.12),0 0 78px rgba(0,0,0,.38);
animation:playButtonMicroGlitch .7s steps(3,end) infinite;
}
.ringo-trailer.is-hovering .preview-tile-video,
.ringo-trailer:hover .preview-tile-video,
.ringo-trailer:focus-visible .preview-tile-video{
opacity:.9;
filter:brightness(1.08) saturate(1.12) contrast(1.06);
transform:scale(1.035);
animation:ringoPreviewVideoGlitch 2.4s ease-in-out infinite;
}
.ringo-trailer:hover .trailer-play::before{
opacity:.85;animation:playRingBreakA 1.1s steps(4,end) infinite;
}
.ringo-trailer:hover .trailer-play::after{
opacity:.6;animation:playRingBreakB 1.35s steps(5,end) infinite reverse;
}
.ringo-trailer:hover .trailer-play svg{
animation:playIconGlitchSpin 1.2s steps(4,end) infinite;
}
.trailer-play svg{width:28px;height:28px;margin-left:4px;opacity:.85}
.ringo-frame-strip{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
margin-top:16px;
}
.ringo-frame{
--ringo-accent:245,166,35;
--ringo-cool:47,184,255;
--ringo-word-cycle:9.6s;
position:relative;min-height:132px;overflow:hidden;isolation:isolate;
border:1px solid rgba(255,255,255,.09);border-radius:6px;
cursor:pointer;
background:
radial-gradient(ellipse 80% 120% at 50% 26%,rgba(var(--ringo-accent),.1),transparent 64%),
radial-gradient(ellipse 60% 100% at 50% 78%,rgba(var(--ringo-cool),.06),transparent 66%),
linear-gradient(180deg,rgba(10,11,16,.94),rgba(4,5,8,.98));
transition:transform .32s var(--ease),border-color .32s var(--ease),box-shadow .32s var(--ease),background .32s var(--ease);
}
.ringo-frame .preview-tile-video{
z-index:0;
opacity:.58;
filter:brightness(.6) saturate(.9) contrast(1.08);
}
.ringo-frame--story{--ringo-accent:255,91,91;--ringo-cool:245,166,35}
.ringo-frame--world{--ringo-accent:47,184,255;--ringo-cool:151,255,212}
.ringo-frame:hover,
.ringo-frame:focus-visible{
transform:translateY(-6px) scale(1.02);
border-color:rgba(var(--ringo-accent),.55);
box-shadow:
0 24px 60px rgba(0,0,0,.35),
0 0 0 1px rgba(var(--ringo-accent),.12),
0 0 60px rgba(var(--ringo-accent),.14),
0 0 120px rgba(var(--ringo-cool),.06);
}
.ringo-frame:active{
transform:translateY(-2px) scale(0.99);
border-color:rgba(var(--ringo-accent),.7);
box-shadow:
0 10px 30px rgba(0,0,0,.25),
inset 0 0 24px rgba(var(--ringo-accent),.08);
transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease;
}
.ringo-frame:focus-visible{
outline:2px solid rgba(var(--ringo-accent),.85);
outline-offset:4px;
}
.ringo-frame::before{
content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:
repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.018) 3px 4px),
linear-gradient(115deg,transparent 18%,rgba(var(--ringo-accent),.07) 42%,rgba(var(--ringo-cool),.04) 52%,transparent 78%);
opacity:.38;transform:translateX(-20%);
animation:ringoFrameScan 16s linear infinite;
}
.ringo-frame::after{
content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
background:
linear-gradient(90deg,transparent 0 10%,rgba(var(--ringo-accent),.08) 48%,transparent 86%),
linear-gradient(180deg,rgba(255,255,255,.035),transparent 26%,transparent 74%,rgba(0,0,0,.18));
opacity:.5;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.035),inset 0 0 44px rgba(0,0,0,.58);
transition:opacity .32s var(--ease);
}
.ringo-frame-spotlight{
position:absolute;inset:0;z-index:2;
pointer-events:none;opacity:0;
transition:opacity .32s var(--ease);
mix-blend-mode:screen;
background:
radial-gradient(circle 150px at var(--ringo-mx,50%) var(--ringo-my,50%),
rgba(255,209,102,.34) 0%,
rgba(245,166,35,.20) 38%,
rgba(245,166,35,0) 72%);
}
.ringo-trailer .ringo-frame-spotlight{
z-index:7;
background:
radial-gradient(circle 170px at var(--ringo-mx,50%) var(--ringo-my,50%),
rgba(255,209,102,.38) 0%,
rgba(245,166,35,.22) 40%,
rgba(47,184,255,.08) 56%,
rgba(245,166,35,0) 74%);
}
.ringo-frame-grain{
position:absolute;inset:-45%;z-index:2;
pointer-events:none;opacity:0;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.52'/%3E%3C/svg%3E");
background-size:150px 150px;
mix-blend-mode:overlay;
transition:opacity .32s var(--ease);
}
.ringo-trailer .ringo-frame-grain{
z-index:8;
}
.ringo-frame.is-hovering .ringo-frame-spotlight{
opacity:1;
}
.ringo-frame:hover .ringo-frame-spotlight,
.ringo-frame:focus-visible .ringo-frame-spotlight,
.ringo-trailer.is-hovering .ringo-frame-spotlight,
.ringo-trailer:hover .ringo-frame-spotlight,
.ringo-trailer:focus-visible .ringo-frame-spotlight{
opacity:1;
}
.ringo-frame.is-hovering .ringo-frame-grain{
opacity:.13;
animation:ringoFrameGrainShift .52s steps(3,end) infinite;
}
.ringo-frame:hover .ringo-frame-grain,
.ringo-frame:focus-visible .ringo-frame-grain,
.ringo-trailer.is-hovering .ringo-frame-grain,
.ringo-trailer:hover .ringo-frame-grain,
.ringo-trailer:focus-visible .ringo-frame-grain{
opacity:.13;
animation:ringoFrameGrainShift .52s steps(3,end) infinite;
}
.ringo-frame.is-hovering .preview-tile-video,
.ringo-frame:hover .preview-tile-video,
.ringo-frame:focus-visible .preview-tile-video{
opacity:.82;
filter:brightness(1.06) saturate(1.1) contrast(1.08);
transform:scale(1.03);
animation:ringoPreviewVideoGlitch 2.4s ease-in-out infinite;
}
.ringo-frame:hover::before,
.ringo-frame:focus-visible::before{
opacity:.62;animation:ringoFrameScan 7s linear infinite,ringoFrameFlicker 2.8s steps(1,end) infinite;
}
.ringo-frame:hover::after,
.ringo-frame:focus-visible::after{
opacity:.72;
}
.ringo-frame-label{
position:absolute;left:14px;top:12px;z-index:7;
max-width:calc(100% - 28px);
overflow:hidden;
white-space:nowrap;
font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:0;text-transform:uppercase;
color:rgba(255,255,255,.72);
opacity:1!important;
visibility:visible!important;
text-shadow:0 1px 8px rgba(0,0,0,.72);
transition:color .28s var(--ease),text-shadow .28s var(--ease),filter .28s var(--ease);
filter:none;
}
.ringo-frame.is-hovering .ringo-frame-label,
.ringo-frame:hover .ringo-frame-label,
.ringo-frame:focus-visible .ringo-frame-label,
.ringo-frame:active .ringo-frame-label{
opacity:1!important;
visibility:visible!important;
color:rgba(255,255,255,.88);
text-shadow:0 1px 8px rgba(0,0,0,.78),0 0 14px rgba(var(--ringo-accent),.24);
filter:none;
}
.ringo-frame-words{
position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;
pointer-events:none;
}
.ringo-frame-words::before,
.ringo-frame-words::after{
content:"";position:absolute;left:12%;right:12%;height:1px;z-index:0;
opacity:0;pointer-events:none;
transition:opacity .28s var(--ease),transform .28s var(--ease);
}
.ringo-frame-words::before{
top:43%;
background:linear-gradient(90deg,transparent,rgba(var(--ringo-accent),.42),transparent);
transform:translateX(-18%);
}
.ringo-frame-words::after{
top:57%;
background:linear-gradient(90deg,transparent,rgba(var(--ringo-cool),.26),transparent);
transform:translateX(18%);
}
.ringo-frame:hover .ringo-frame-words::before,
.ringo-frame:focus-visible .ringo-frame-words::before{
opacity:.6;animation:ringoWordSweepA 1.4s steps(4,end) infinite;
}
.ringo-frame:hover .ringo-frame-words::after,
.ringo-frame:focus-visible .ringo-frame-words::after{
opacity:.44;animation:ringoWordSweepB 1.7s steps(4,end) infinite;
}
.ringo-frame-word{
position:absolute;z-index:1;line-height:.96;white-space:nowrap;text-transform:uppercase;
max-width:calc(100% - 32px);
text-align:center;
font-family:'Space Grotesk',sans-serif;font-weight:700;
font-size:clamp(1.55rem,3.2vw,2.4rem);letter-spacing:.12em;
color:rgba(255,255,255,.94);
text-shadow:0 2px 12px rgba(0,0,0,.72);
transition:color .28s var(--ease),text-shadow .28s var(--ease),filter .28s var(--ease);
will-change:opacity,transform,filter;
}
.ringo-title-target{
position:absolute;
z-index:2;
display:inline-flex;
align-items:center;
justify-content:center;
max-width:calc(100% - 32px);
padding-left:.12em;
overflow:visible;
opacity:1!important;
visibility:visible;
color:rgba(255,255,255,.97);
text-shadow:
0 2px 12px rgba(0,0,0,.72),
0 0 18px rgba(var(--ringo-accent),.18),
0 0 2px rgba(var(--ringo-cool),.16);
animation:none!important;
transform:none;
filter:none;
isolation:isolate;
}
.ringo-title-target::before,
.ringo-title-target::after{
content:attr(data-title);
position:absolute;inset:0;
display:inline-flex;
align-items:center;
justify-content:center;
padding-left:.12em;
opacity:.16;
pointer-events:none;
overflow:hidden;
white-space:nowrap;
color:#fff;
mix-blend-mode:screen;
}
.ringo-title-target::before{
color:rgba(var(--ringo-cool),.5);
transform:translate(1px,-1px);
clip-path:inset(0 0 54% 0);
}
.ringo-title-target::after{
color:rgba(var(--ringo-accent),.5);
transform:translate(-1px,1px);
clip-path:inset(50% 0 0 0);
}
.ringo-frame-word:not(.ringo-title-target){
opacity:0;
visibility:hidden;
animation:none;
}
.ringo-frame.is-hovering .ringo-frame-word,
.ringo-frame:hover .ringo-frame-word,
.ringo-frame:focus-visible .ringo-frame-word{
animation-duration:3.4s;
color:rgba(255,255,255,.98);
text-shadow:
0 2px 12px rgba(0,0,0,.74),
0 0 24px rgba(var(--ringo-accent),.2),
0 0 3px rgba(var(--ringo-cool),.18);
}
.ringo-frame.is-hovering .ringo-frame-word:not(.ringo-title-target),
.ringo-frame:hover .ringo-frame-word:not(.ringo-title-target),
.ringo-frame:focus-visible .ringo-frame-word:not(.ringo-title-target),
.ringo-frame:active .ringo-frame-word:not(.ringo-title-target){
opacity:0!important;
visibility:hidden;
animation:none!important;
}
.ringo-frame.is-hovering .ringo-title-target,
.ringo-frame:hover .ringo-title-target,
.ringo-frame:focus-visible .ringo-title-target,
.ringo-frame:active .ringo-title-target{
opacity:1!important;
visibility:visible;
color:rgba(255,255,255,1);
text-shadow:
0 2px 12px rgba(0,0,0,.72),
0 0 26px rgba(var(--ringo-accent),.3),
0 0 4px rgba(var(--ringo-cool),.24);
filter:contrast(1.08) saturate(1.08);
animation:ringoEmpoweredTitleGlitchIn .45s steps(2,end) both!important;
}
.ringo-frame.is-hovering .ringo-title-target::before,
.ringo-frame:hover .ringo-title-target::before,
.ringo-frame:focus-visible .ringo-title-target::before,
.ringo-frame:active .ringo-title-target::before{
opacity:.62;
color:rgba(var(--ringo-cool),.86);
transform:translate(1px,-1px);
clip-path:inset(0 0 48% 0);
animation:ringoTitleGlitchA .52s steps(2,end) infinite;
}
.ringo-frame.is-hovering .ringo-title-target::after,
.ringo-frame:hover .ringo-title-target::after,
.ringo-frame:focus-visible .ringo-title-target::after,
.ringo-frame:active .ringo-title-target::after{
opacity:.52;
color:rgba(var(--ringo-accent),.88);
transform:translate(-1px,1px);
clip-path:inset(52% 0 0 0);
animation:ringoTitleGlitchB .64s steps(2,end) infinite;
}
.ringo-frame-word--a{animation:ringoWordA var(--ringo-word-cycle) steps(1,end) infinite}
.ringo-frame-word--b{animation:ringoWordB var(--ringo-word-cycle) steps(1,end) infinite}
.ringo-frame--story .ringo-frame-word{animation-delay:-2.1s}
.ringo-frame--world .ringo-frame-word{animation-delay:-3.9s}
/* DIE stays CSS-only: delayed and low-opacity so it reads as a rare frame artifact, not a loop. */
.ringo-die-flash{
position:absolute;right:14px;bottom:12px;z-index:5;
font-family:'IBM Plex Mono',monospace;font-size:.58rem;letter-spacing:0;text-transform:uppercase;
color:rgba(245,166,35,.52);text-shadow:0 0 8px rgba(245,166,35,.16);
opacity:0;pointer-events:none;user-select:none;
animation:ringoDieFlash 43s steps(1,end) 9s infinite;
will-change:opacity,transform,filter;
}
@keyframes ringoFrameScan{
from{transform:translateX(-20%)}
to{transform:translateX(20%)}
}
@keyframes ringoFrameFlicker{
0%,82%,100%{filter:none}
84%{filter:brightness(1.18) saturate(1.2)}
86%{filter:blur(.6px) brightness(1.08)}
88%{filter:none}
}
@keyframes ringoFrameGrainShift{
0%{transform:translate(0,0)}
33%{transform:translate(-3%,2%)}
66%{transform:translate(2%,-3%)}
100%{transform:translate(0,0)}
}
@keyframes ringoEmpoweredTitleGlitchIn{
0%{opacity:1;filter:blur(3.5px) hue-rotate(40deg) brightness(1.45);transform:translate(-3px,2px) skewX(-4deg)}
35%{opacity:1;filter:blur(1.5px) hue-rotate(-20deg) brightness(1.25);transform:translate(2px,-1px) skewX(3deg)}
60%{opacity:1;filter:blur(2px) hue-rotate(15deg) brightness(1.32);transform:translate(-1px,1px) skewX(-2deg)}
100%{opacity:1;filter:blur(0) hue-rotate(0) brightness(1);transform:translate(0,0) skewX(0)}
}
@keyframes ringoTitleGlitchBase{
0%,100%{transform:translate(0,0)}
42%{transform:translate(.4px,0)}
44%{transform:translate(-.4px,0)}
46%{transform:translate(0,0)}
}
@keyframes ringoTitleGlitchA{
0%,100%{transform:translate(1px,-1px)}
34%{transform:translate(2px,0)}
36%{transform:translate(-1px,-1px)}
58%{transform:translate(1px,0)}
}
@keyframes ringoTitleGlitchB{
0%,100%{transform:translate(-1px,1px)}
28%{transform:translate(-2px,0)}
32%{transform:translate(1px,1px)}
62%{transform:translate(-1px,0)}
}
@keyframes ringoPreviewVideoGlitch{
0%,100%{transform:scale(1.03) translate(0,0)}
22%{transform:scale(1.032) translate(.6px,-.4px)}
44%{transform:scale(1.028) translate(-.5px,.5px)}
68%{transform:scale(1.034) translate(.4px,.3px)}
}
@keyframes ringoWordSweepA{
0%,100%{transform:translateX(-18%);opacity:.34}
44%{transform:translateX(0);opacity:.62}
58%{transform:translateX(16%);opacity:.18}
}
@keyframes ringoWordSweepB{
0%,100%{transform:translateX(18%);opacity:.18}
38%{transform:translateX(0);opacity:.44}
62%{transform:translateX(-14%);opacity:.12}
}
@keyframes ringoWordA{
0%,42%,100%{opacity:1;transform:translate(0,0);filter:none}
43%{opacity:.52;transform:translate(-2px,1px);filter:blur(.8px) saturate(1.4)}
45%{opacity:.18;transform:translate(3px,-1px);filter:blur(1px)}
47%,91%{opacity:0;transform:translate(3px,-1px);filter:blur(1px)}
92%{opacity:.7;transform:translate(-1px,1px);filter:blur(.5px) brightness(1.2)}
94%{opacity:1;transform:translate(0,0);filter:none}
}
@keyframes ringoWordB{
0%,42%,100%{opacity:0;transform:translate(-2px,1px);filter:blur(1px)}
43%{opacity:.64;transform:translate(2px,-1px);filter:blur(.7px) brightness(1.15)}
45%,91%{opacity:1;transform:translate(0,0);filter:none}
92%{opacity:.35;transform:translate(2px,1px);filter:blur(.8px)}
94%{opacity:0;transform:translate(-2px,1px);filter:blur(1px)}
}
@keyframes ringoDieFlash{
0%,94.86%,95.72%,100%{opacity:0;transform:translate(0,0);filter:none}
94.92%{opacity:.08;transform:translate(-1px,0);filter:blur(.2px)}
95.06%{opacity:0;transform:translate(0,0);filter:none}
95.24%{opacity:.14;transform:translate(1px,-1px);filter:blur(.35px)}
95.38%{opacity:0;transform:translate(0,0);filter:none}
95.58%{opacity:.06;transform:translate(-1px,1px);filter:blur(.2px)}
}
#empowered .lead{margin-top:28px}
@media(max-width:768px){
.ringo-frame-strip{grid-template-columns:1fr}
.ringo-frame{min-height:118px}
}
@media(max-width:440px){
.ringo-frame-word{font-size:1.65rem}
}
@media(prefers-reduced-motion:reduce){
.trailer-atmo::before,.trailer-atmo::after,.trailer-sweep,.ringo-frame::before,.ringo-frame-words::before,.ringo-frame-words::after,.ringo-frame-word,.ringo-die-flash,
.ringo-frame.is-hovering .ringo-frame-grain,.ringo-frame:hover .ringo-frame-grain,.ringo-frame:focus-visible .ringo-frame-grain,.ringo-trailer.is-hovering .ringo-frame-grain,.ringo-trailer:hover .ringo-frame-grain,.ringo-trailer:focus-visible .ringo-frame-grain,
.ringo-frame.is-hovering .preview-tile-video,.ringo-frame:hover .preview-tile-video,.ringo-frame:focus-visible .preview-tile-video,.ringo-trailer.is-hovering .preview-tile-video,.ringo-trailer:hover .preview-tile-video,.ringo-trailer:focus-visible .preview-tile-video,
.ringo-trailer:hover .trailer-play,.ringo-trailer:hover .trailer-play::before,.ringo-trailer:hover .trailer-play::after,.ringo-trailer:hover .trailer-play svg{animation:none!important}
.ringo-frame,.ringo-frame:hover,.ringo-frame:focus-visible{transform:none;transition:none}
.ringo-frame::before{opacity:.22;transform:none}
.ringo-frame-spotlight,.ringo-frame-grain{transition:none}
.ringo-frame.is-hovering .ringo-frame-grain{opacity:.08}
.ringo-frame-words::before,.ringo-frame-words::after{opacity:0!important}
.ringo-title-target,.ringo-title-target::before,.ringo-title-target::after{animation:none!important}
.ringo-title-target::before,.ringo-title-target::after{opacity:0!important}
.ringo-frame-word{transition:none}
.ringo-frame-label,
.ringo-frame.is-hovering .ringo-frame-label,
.ringo-frame:hover .ringo-frame-label,
.ringo-frame:focus-visible .ringo-frame-label,
.ringo-frame:active .ringo-frame-label{opacity:1!important;visibility:visible!important;filter:none!important}
.ringo-frame-word:not(.ringo-title-target),.ringo-die-flash{opacity:0!important;visibility:hidden!important;animation:none!important}
.ringo-title-target{opacity:1!important;visibility:visible!important;color:rgba(255,255,255,.96)!important;transform:none!important;filter:none!important}
.ringo-frame.is-hovering .ringo-frame-word:not(.ringo-title-target),
.ringo-frame:hover .ringo-frame-word:not(.ringo-title-target),
.ringo-frame:focus-visible .ringo-frame-word:not(.ringo-title-target),
.ringo-frame:active .ringo-frame-word:not(.ringo-title-target){opacity:0!important;visibility:hidden!important}
.ringo-frame.is-hovering .ringo-title-target,
.ringo-frame:hover .ringo-title-target,
.ringo-frame:focus-visible .ringo-title-target,
.ringo-frame:active .ringo-title-target{opacity:1!important;visibility:visible!important;transform:none!important;filter:none!important;animation:none!important}
}
/* ── Section Social Links ── */
.section-socials{display:flex;align-items:center;gap:1.25rem;margin-top:2rem}
.social-link{
display:flex;align-items:center;gap:.4rem;
color:var(--dim);text-decoration:none;
font-family:'IBM Plex Mono',monospace;font-size:.75rem;letter-spacing:.04em;
opacity:.7;
transition:color .3s ease,transform .3s ease,opacity .3s ease;
}
.social-link:hover{color:var(--text);transform:translateY(-1px);opacity:1}
.social-link:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:2px}
.social-icon{width:1rem;height:1rem;flex-shrink:0}
#made .social-link:hover{color:var(--accent)}
#empowered .social-link:hover{color:#F5A623}
/* built */
.arc-grid{
display:grid;grid-template-columns:1fr 1fr;gap:60px;
margin-top:0;align-items:start;
}
.arc-left{display:flex;flex-direction:column;gap:0;align-items:flex-start}
.arc-left .section-title{margin-bottom:1.1rem}
#built .made-tagline{margin-bottom:1.8rem}
.arc-left .lead{max-width:none}
.arc-points{list-style:none;display:flex;flex-direction:column}
.arc-points li{
position:relative;padding:20px 0 20px 22px;
color:var(--dim);font-size:var(--text-base);line-height:1.6;
border-bottom:1px solid var(--line);
transition:color .25s var(--ease);
}
.arc-points li:first-child{border-top:1px solid var(--line)}
.arc-points li:hover{color:var(--text)}
.arc-points li::before{
content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
background:var(--accent-grad);
}
.occ-divider{
position:relative;height:1px;margin:58px 0 44px;overflow:hidden;
background:linear-gradient(90deg,transparent,rgba(47,184,255,.18),rgba(110,99,255,.16),transparent);
box-shadow:0 0 22px rgba(47,184,255,.08);
}
.occ-divider::after{
content:"";position:absolute;inset:0;
background:linear-gradient(90deg,transparent,rgba(47,184,255,.55),rgba(255,255,255,.18),transparent);
transform:translateX(-140%) skewX(-5deg);
animation:shimmer 14s linear infinite;
}
.occ-feature{
display:grid;grid-template-columns:minmax(0,.92fr) minmax(320px,1.08fr);gap:56px;
align-items:center;
}
.occ-copy .lead{max-width:none}
.occ-visual{
position:relative;min-height:320px;overflow:hidden;isolation:isolate;
border:1px solid rgba(47,184,255,.14);border-radius:8px;
background:
radial-gradient(ellipse 80% 70% at 50% 45%,rgba(47,184,255,.10),transparent 62%),
radial-gradient(ellipse 55% 60% at 78% 68%,rgba(110,99,255,.12),transparent 58%),
linear-gradient(180deg,rgba(10,12,20,.96),rgba(4,5,9,.98));
box-shadow:inset 0 0 0 1px rgba(255,255,255,.035),0 26px 82px rgba(0,0,0,.32);
}
.occ-image{
position:absolute;inset:12px;z-index:1;
width:calc(100% - 24px);height:calc(100% - 24px);
object-fit:cover;
object-position:center center;
border-radius:6px;
box-shadow:0 24px 80px rgba(0,0,0,.35);
}
.occ-visual::before{
content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
background:
linear-gradient(180deg,rgba(255,255,255,.035),transparent 18%,transparent 78%,rgba(0,0,0,.28)),
radial-gradient(ellipse 78% 80% at 50% 62%,transparent 48%,rgba(3,4,9,.54) 100%);
opacity:.7;
animation:panel-pulse 8s ease-in-out infinite;
}
.occ-visual::after{
content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
background:linear-gradient(115deg,transparent 18%,rgba(255,255,255,.018) 38%,rgba(47,184,255,.08) 50%,rgba(110,99,255,.035) 62%,transparent 82%);
transform:translateX(-150%) skewX(-5deg);
animation:shimmer 18s linear infinite;
}
.occ-visual-grid{
position:absolute;inset:26px;z-index:3;
}
.occ-core,
.occ-node{
position:absolute;display:grid;place-items:center;
font-family:'IBM Plex Mono',monospace;text-transform:uppercase;text-align:center;
border:1px solid rgba(255,255,255,.10);
background:rgba(7,8,12,.58);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.occ-core{
left:50%;top:50%;width:104px;height:104px;border-radius:50%;
transform:translate(-50%,-50%);
color:var(--text);font-size:1rem;letter-spacing:.24em;
border-color:rgba(47,184,255,.28);
box-shadow:0 0 38px rgba(47,184,255,.13),0 0 80px rgba(110,99,255,.08);
}
.occ-node{
min-width:112px;min-height:42px;padding:8px 12px;border-radius:6px;
color:var(--dim);font-size:.64rem;letter-spacing:.16em;line-height:1.35;
}
.occ-node::before{
content:"";position:absolute;left:50%;top:50%;width:1px;height:86px;z-index:-1;
transform-origin:50% 0;
background:linear-gradient(180deg,rgba(47,184,255,.22),transparent);
}
.occ-node--context{left:4%;top:10%}
.occ-node--context::before{transform:rotate(50deg)}
.occ-node--decisions{right:5%;top:14%}
.occ-node--decisions::before{transform:rotate(-48deg)}
.occ-node--actions{right:2%;bottom:14%}
.occ-node--actions::before{transform:rotate(-132deg)}
.occ-node--controls{left:7%;bottom:15%}
.occ-node--controls::before{transform:rotate(132deg)}
.occ-node--creative{left:50%;bottom:2%;transform:translateX(-50%)}
.occ-node--creative::before{height:62px;transform:rotate(180deg)}
@media(prefers-reduced-motion:reduce){
.occ-divider::after,.occ-visual::before,.occ-visual::after{animation:none!important}
}
/* about (tabbed card) */
.about-card{
margin-top:52px;background:var(--card);
border:1px solid var(--line);border-radius:14px;overflow:hidden;
box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.about-tabs{
display:flex;align-items:center;justify-content:flex-start;padding-left:2rem;gap:.75rem;
border-bottom:1px solid var(--line);
overflow-x:auto;scrollbar-width:none;
}
.about-tabs::-webkit-scrollbar{display:none}
.about-tab{
flex-shrink:0;display:inline-flex;align-items:center;
padding:0 20px;min-height:52px;
font-family:'Space Grotesk',sans-serif;font-size:.92rem;font-weight:600;
color:var(--dim);background:none;border:none;cursor:pointer;
position:relative;white-space:nowrap;
transition:color .5s ease,transform .5s ease,filter .5s ease;
}
.lbl-short,.lbl-full{
display:inline-block;overflow:hidden;white-space:nowrap;
}
.lbl-short{
max-width:6ch;opacity:1;
transition:max-width .6s cubic-bezier(.25,.46,.45,.94),opacity .5s ease;
}
.lbl-full{
max-width:20ch;opacity:1;
transition:max-width .6s cubic-bezier(.25,.46,.45,.94),opacity .5s ease;
}
.about-tab[aria-selected="true"] .lbl-short{max-width:0;opacity:0}
.about-tab[aria-selected="true"] .lbl-full{max-width:20ch;opacity:1;letter-spacing:.01em}
/* per-project active label identity */
.about-tab[aria-controls="panel-d3d"][aria-selected="true"] .lbl-full{
background:var(--accent-grad);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
filter:drop-shadow(0 0 20px rgba(47,184,255,.4));
}
.about-tab[aria-controls="panel-ringo"][aria-selected="true"] .lbl-full{
-webkit-text-fill-color:#F5A623;
filter:drop-shadow(0 0 20px rgba(245,166,35,.35));
}
.about-tab[aria-controls="panel-arc"][aria-selected="true"] .lbl-full{
-webkit-text-fill-color:#6E63FF;
filter:drop-shadow(0 0 20px rgba(110,99,255,.4));
}
.about-tab[aria-selected="true"]{color:var(--text);transform:scale(1.05)}
.about-tab:not([aria-selected="true"]):hover{color:var(--text);transform:translateY(-1px)}
.about-tab::after{
content:"";position:absolute;
bottom:-1px;left:0;right:0;height:2px;
background:var(--accent-grad);
transform:scaleX(0);transform-origin:left;
transition:transform .5s ease;
}
.about-tab[aria-selected="true"]::after{transform:scaleX(1)}
/* per-project underline accent */
.about-tab[aria-controls="panel-ringo"][aria-selected="true"]::after{background:#F5A623}
.about-tab[aria-controls="panel-arc"][aria-selected="true"]::after{background:#6E63FF}
.about-tab:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:3px}
.about-tab[aria-controls="panel-ringo"]:focus-visible{outline-color:#F5A623}
.about-tab[aria-controls="panel-arc"]:focus-visible{outline-color:#6E63FF}
.tab-panels{display:grid;padding:40px 36px 38px}
.tab-panel{
grid-area:1/1;opacity:0;visibility:hidden;z-index:0;
transition:opacity .35s ease-out,visibility 0s .35s;
position:relative;overflow:hidden;isolation:isolate;
}
.tab-panel.active{
opacity:1;visibility:visible;z-index:1;
transition:opacity .45s ease-in .1s;
}
/* image layer — ships empty, accepts ![]()
when artwork is ready */
.about-img{
position:absolute;inset:0;z-index:0;
overflow:hidden;pointer-events:none;
opacity:0;transition:opacity .8s ease .2s;
}
.tab-panel.active .about-img{opacity:1}
.about-img img{
width:100%;height:100%;
object-fit:cover;object-position:center;
opacity:.15;filter:saturate(.5);mix-blend-mode:luminosity;
}
.tab-panel[data-project="d3d"] .about-img img{filter:saturate(.4) sepia(.1) hue-rotate(180deg)}
.tab-panel[data-project="ringo"] .about-img img{filter:saturate(.5) sepia(.2)}
.tab-panel[data-project="arc"] .about-img img{filter:saturate(.3) brightness(.8) hue-rotate(220deg)}
/* panel background atmosphere layers */
.about-bg{
position:absolute;inset:0 -30%;z-index:1;pointer-events:none;
opacity:0;transition:opacity .8s ease;
}
.tab-panel.active .about-bg{opacity:1;transition:opacity 1s ease-in .3s}
/* D3D — cinematic render-space: lens bloom + light sweep + film grain + bottom blue bar */
.about-bg--d3d{
background:
radial-gradient(ellipse 80% 70% at 15% 40%,rgba(47,184,255,.13) 0%,transparent 55%),
radial-gradient(ellipse 60% 80% at 88% 70%,rgba(110,99,255,.10) 0%,transparent 55%),
radial-gradient(ellipse 100% 40% at 50% 100%,rgba(47,184,255,.13) 0%,transparent 100%);
animation:lockupGlowDrift 8s ease-in-out infinite alternate;
}
.about-bg--d3d::before{
content:"";position:absolute;inset:0;
background:linear-gradient(115deg,
transparent 18%,rgba(255,255,255,.02) 38%,
rgba(47,184,255,.05) 50%,rgba(255,255,255,.014) 62%,transparent 82%);
transform:translateX(-150%) skewX(-5deg);
animation:shimmer 16s linear infinite;
}
.about-bg--d3d::after{
content:"";position:absolute;inset:0;
background:
repeating-linear-gradient(0deg,transparent 0 2px,rgba(255,255,255,.010) 2px 3px),
repeating-linear-gradient(87deg,transparent 0 2px,rgba(255,255,255,.007) 2px 3px);
mix-blend-mode:overlay;opacity:.5;
}
/* Ringo — warm amber glow + storybook shimmer + bottom amber bar */
.about-bg--ringo{
background:
radial-gradient(ellipse 80% 60% at 50% 90%,rgba(255,165,50,.12) 0%,transparent 60%),
radial-gradient(ellipse 60% 40% at 50% 65%,rgba(255,190,80,.07) 0%,transparent 50%),
radial-gradient(ellipse 100% 40% at 50% 100%,rgba(245,166,35,.11) 0%,transparent 100%);
animation:lockupGlowDrift 8s ease-in-out infinite alternate;
}
.about-bg--ringo::before{
content:"";position:absolute;inset:0;
background:linear-gradient(115deg,
transparent 18%,rgba(255,180,60,.022) 38%,
rgba(255,165,50,.04) 50%,rgba(255,180,60,.016) 62%,transparent 82%);
transform:translateX(-150%) skewX(-5deg);
animation:shimmer 20s linear infinite;animation-delay:-7s;
}
.about-bg--ringo::after{
content:"";position:absolute;inset:0;
background:
repeating-linear-gradient(0deg,transparent 0 2px,rgba(255,255,255,.009) 2px 3px),
repeating-linear-gradient(87deg,transparent 0 2px,rgba(255,255,255,.006) 2px 3px);
mix-blend-mode:overlay;opacity:.4;
}
/* ARC — engine-room: node-grid + soft pulse */
.about-bg--arc{
background:
radial-gradient(ellipse 70% 80% at 20% 30%,rgba(47,184,255,.12) 0%,transparent 50%),
radial-gradient(ellipse 60% 70% at 80% 70%,rgba(110,99,255,.14) 0%,transparent 50%),
radial-gradient(ellipse 40% 40% at 50% 50%,rgba(47,184,255,.05) 0%,transparent 45%);
}
.about-bg--arc::before{
content:"";position:absolute;inset:0;
background:
repeating-linear-gradient(90deg,rgba(47,184,255,.04) 0 1px,transparent 1px 60px),
repeating-linear-gradient(0deg,rgba(110,99,255,.03) 0 1px,transparent 1px 60px);
animation:panel-pulse 6s ease-in-out infinite;
}
.about-bg--arc::after{
content:"";position:absolute;inset:0;
background:
radial-gradient(circle 3px at 25% 35%,rgba(47,184,255,.30) 0%,transparent 100%),
radial-gradient(circle 2px at 75% 65%,rgba(110,99,255,.28) 0%,transparent 100%),
radial-gradient(circle 3px at 60% 22%,rgba(47,184,255,.22) 0%,transparent 100%),
radial-gradient(circle 2px at 40% 78%,rgba(110,99,255,.20) 0%,transparent 100%),
radial-gradient(circle 2px at 85% 32%,rgba(47,184,255,.18) 0%,transparent 100%);
animation:panel-pulse 8s ease-in-out infinite;animation-delay:-2s;
}
/* panel content wrapper — text layer above bg and image */
.panel-content{
opacity:0;transform:translateY(12px);
transition:opacity .3s ease,transform .3s ease;
position:relative;z-index:2;
}
.tab-panel.active .panel-content{
opacity:1;transform:translateY(0);
transition:opacity .5s ease .15s,transform .5s ease .15s;
}
.tab-panel:not(.active) .panel-content{animation:none}
/* per-project entrance animations */
.tab-panel.active[data-project="d3d"] .panel-content{animation:d3d-reveal 1s ease-out .2s both}
.tab-panel.active[data-project="ringo"] .panel-content{animation:ringo-unfold 1.1s ease-out .2s both}
.tab-panel.active[data-project="arc"] .panel-content{animation:arc-boot .9s ease-out .2s both}
/* per-project panel accent border */
.tab-panel[data-project="d3d"] .panel-content{
border-left:2px solid #2FB8FF;padding-left:20px;
box-shadow:-4px 0 16px rgba(47,184,255,.15);
}
.tab-panel[data-project="ringo"] .panel-content{
border-left:2px solid #F5A623;padding-left:20px;
box-shadow:-4px 0 16px rgba(245,166,35,.12);
}
.tab-panel[data-project="arc"] .panel-content{
border-left:2px solid #6E63FF;padding-left:20px;
box-shadow:-4px 0 16px rgba(110,99,255,.12);
}
.panel-content p{color:var(--dim);font-size:var(--text-base);line-height:1.75;max-width:62ch}
.panel-content .panel-note{
margin-top:16px;
font-family:'IBM Plex Mono',monospace;font-size:.72rem;
letter-spacing:.18em;text-transform:uppercase;color:var(--dim-2);
}
.tab-panel[data-project="ringo"] .panel-note{color:#F5A623;font-style:italic}
/* per-project tagline callouts */
.panel-content .tagline{font-style:italic}
.tab-panel[data-project="d3d"] .tagline{
background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
}
.tab-panel[data-project="arc"] .tagline{color:#6E63FF;-webkit-text-fill-color:#6E63FF}
/* per-project entrance keyframes */
@keyframes d3d-reveal{
0%{filter:brightness(1) drop-shadow(0 0 0px transparent);transform:scale(.97) translateY(8px)}
40%{filter:brightness(1.05) drop-shadow(0 0 12px rgba(47,184,255,.2))}
100%{filter:brightness(1) drop-shadow(0 0 0px transparent);transform:scale(1) translateY(0)}
}
@keyframes ringo-unfold{
0%{transform:translateX(-10px) translateY(8px);filter:brightness(1) drop-shadow(0 0 0px transparent);opacity:0}
30%{opacity:1}
50%{filter:brightness(1.04) drop-shadow(0 0 10px rgba(245,166,35,.15))}
100%{transform:translateX(0) translateY(0);filter:brightness(1) drop-shadow(0 0 0px transparent);opacity:1}
}
@keyframes arc-boot{
0%{transform:translateY(10px);opacity:0}
20%{opacity:.7}
28%{opacity:.4}
36%{opacity:.9}
42%{opacity:.6}
55%{opacity:1}
100%{transform:translateY(0);opacity:1}
}
/* About lockup glow drift — shared animation for all three panel backgrounds */
@keyframes lockupGlowDrift{
from{transform:translateX(-30%)}
to{transform:translateX(30%)}
}
.about-bg--arc{
animation:lockupGlowDrift 8s ease-in-out infinite alternate;
}
/* Lockup panel content text flicker — subtle old-monitor opacity pulse on active panel text */
@keyframes lockupTextFlicker{
0%,100%{opacity:1}
12%{opacity:.93}
13%{opacity:.85}
14%{opacity:.97}
47%{opacity:.91}
49%{opacity:.85}
51%{opacity:.98}
78%{opacity:.88}
80%{opacity:.85}
82%{opacity:1}
}
.tab-panel.active .panel-content p{
animation:lockupTextFlicker 4s ease-in-out infinite;
}
/* contact */
.shared-contact-section{padding:64px 0 0;background:transparent}
.company-contact-card{margin-top:0}
.company-contact-card .about-tab{padding:0 24px}
.company-contact-card .about-tab .lbl-full{
max-width:20ch;opacity:1;letter-spacing:.01em;
}
.company-contact-card .tab-panels{padding:40px 36px 38px}
.company-contact-card .contact-panel{min-height:560px}
.company-contact-card .contact-grid,
.company-contact-card .contact-placeholder{
position:relative;z-index:2;
}
.company-contact-card .contact-grid{width:100%}
.company-contact-card .section-title{max-width:20ch}
.company-contact-card .lead{max-width:58ch}
.contact-placeholder{
max-width:720px;
padding:80px 0 36px;
}
.placeholder-status{
margin-top:28px;
font-family:'IBM Plex Mono',monospace;
font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;
color:#F5A623;
}
.tab-panel[data-project="ringo"] .eyebrow{color:#F5A623}
.tab-panel[data-project="ringo"] .eyebrow::before{background:linear-gradient(90deg,transparent,#F5A623)}
.tab-panel[data-project="ringo"] label .req{color:#F5A623}
.tab-panel[data-project="ringo"] .email-card .ico{
color:#F5A623;
border-color:rgba(245,166,35,.26);
}
.tab-panel[data-project="ringo"] .email-card:hover{
border-color:#F5A623;
box-shadow:0 0 34px -12px rgba(245,166,35,.72);
}
.tab-panel[data-project="ringo"] .ce-row .dot{
background:#F5A623;
box-shadow:0 0 8px rgba(245,166,35,.65);
}
.tab-panel[data-project="ringo"] input:focus,
.tab-panel[data-project="ringo"] select:focus,
.tab-panel[data-project="ringo"] textarea:focus{
border-color:#F5A623;
box-shadow:0 0 0 3px rgba(245,166,35,.14);
}
.tab-panel[data-project="ringo"] .btn-primary{
background:linear-gradient(120deg,#F5A623 0%,#FFD166 100%);
color:#06080f;
box-shadow:0 8px 30px -10px rgba(245,166,35,.5);
}
.tab-panel[data-project="ringo"] .btn-primary:hover{box-shadow:0 14px 40px -8px rgba(245,166,35,.42)}
.tab-panel[data-project="ringo"] .form-msg--success{
color:#FFD166;
background:rgba(245,166,35,.08);
border-color:rgba(245,166,35,.24);
}
.tab-panel[data-project="arc"] .eyebrow{color:#6E63FF}
.tab-panel[data-project="arc"] .eyebrow::before{background:linear-gradient(90deg,transparent,#6E63FF)}
.tab-panel[data-project="arc"] label .req{color:#6E63FF}
.tab-panel[data-project="arc"] input:focus,
.tab-panel[data-project="arc"] select:focus,
.tab-panel[data-project="arc"] textarea:focus{
border-color:#6E63FF;
box-shadow:0 0 0 3px rgba(110,99,255,.14);
}
.tab-panel[data-project="arc"] .btn-primary{
background:linear-gradient(120deg,#5A4FE0 0%,#6E63FF 100%);
color:#fff;
box-shadow:0 8px 30px -10px rgba(110,99,255,.45);
}
.tab-panel[data-project="arc"] .btn-primary:hover{box-shadow:0 14px 40px -8px rgba(110,99,255,.42)}
.tab-panel[data-project="arc"] .form-msg--success{
color:#B7B0FF;
background:rgba(110,99,255,.08);
border-color:rgba(110,99,255,.24);
}
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start}
.contact-info .lead{margin-bottom:28px}
.email-card{
display:flex;align-items:center;gap:16px;padding:20px 22px;border:1px solid var(--line);
border-radius:12px;background:rgba(255,255,255,.015);transition:border-color .3s,box-shadow .3s;
pointer-events:auto;user-select:text;
}
.email-card:hover{border-color:var(--accent);box-shadow:0 0 34px -12px var(--glow)}
.email-card.is-copied {
border-color: var(--accent);
}
.email-card.is-copied .val {
color: var(--accent);
}
.email-card.is-copied .copy-status {
opacity:1;
}
.tab-panel[data-project="ringo"] .email-card.is-copied {
border-color:#F5A623;
}
.tab-panel[data-project="ringo"] .email-card.is-copied .val {
color:#F5A623;
}
.tab-panel[data-project="ringo"] .email-card.is-copied .copy-status {
color:#F5A623;
}
.email-card .ico{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;border:1px solid var(--line-hi);color:var(--accent);flex-shrink:0}
.email-card .ico svg{width:20px;height:20px}
.email-text-wrap{min-width:0;flex:1 1 auto}
.email-link{
color:inherit;
text-decoration:none;
-webkit-user-select:text;
user-select:text;
cursor:pointer;
}
.email-link:hover,
.email-link:focus-visible{color:var(--accent)}
.email-card .lbl{font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim-2)}
.email-card .val{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1.02rem;word-break:break-all}
.copy-status{
display:block;
min-height:1.1rem;
margin-top:.35rem;
font-family:'IBM Plex Mono',monospace;
font-size:.68rem;
letter-spacing:.08em;
color:var(--accent);
opacity:0;
transition:opacity .2s ease;
-webkit-user-select:none;
user-select:none;
}
.email-copy-button{
width:38px;height:38px;
display:grid;place-items:center;
flex:0 0 auto;
border:1px solid var(--line-hi);
border-radius:8px;
background:rgba(255,255,255,.03);
color:var(--accent);
cursor:pointer;
transition:border-color .2s ease,background .2s ease,color .2s ease,transform .2s ease;
-webkit-user-select:none;
user-select:none;
}
.email-copy-button svg{width:18px;height:18px}
.email-copy-button:hover,
.email-copy-button:focus-visible{
border-color:var(--accent);
background:rgba(47,184,255,.08);
transform:translateY(-1px);
}
.tab-panel[data-project="ringo"] .email-copy-button{color:#F5A623;border-color:rgba(245,166,35,.26)}
.tab-panel[data-project="ringo"] .email-copy-button:hover,
.tab-panel[data-project="ringo"] .email-copy-button:focus-visible{
border-color:#F5A623;
background:rgba(245,166,35,.09);
}
.contact-extra{margin-top:28px;display:flex;flex-direction:column;gap:14px}
.ce-row{display:flex;gap:12px;color:var(--dim);font-size:.92rem;align-items:center}
.ce-row .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--glow);flex-shrink:0}
form{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1/-1}
label{font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
label .req{color:var(--accent)}
input,select,textarea{
font-family:'Inter',sans-serif;font-size:.95rem;color:var(--text);
background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:13px 15px;
transition:border-color .25s,box-shadow .25s;width:100%;
}
textarea{resize:vertical;min-height:130px}
select{appearance:none;cursor:pointer;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238A91A6' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 15px center;padding-right:38px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(47,184,255,.12)}
input::placeholder,textarea::placeholder{color:var(--dim-2)}
.form-actions{grid-column:1/-1;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.form-note{font-size:.82rem;color:var(--dim-2)}
/* footer */
footer{padding:56px 0 48px;padding-bottom:calc(48px + var(--safe-bottom));border-top:1px solid var(--line);position:relative;z-index:1;transition:opacity .3s ease}
.foot{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.foot-links{display:flex;gap:26px;flex-wrap:wrap}
.foot-links a{font-size:.88rem;color:var(--dim);transition:color .25s}
.foot-links a:hover{color:var(--text)}
.copy{font-family:'IBM Plex Mono',monospace;font-size:.74rem;letter-spacing:.08em;color:var(--dim-2)}
/* ── Theatrical Reel Transition ── */
main{
transition:transform .5s cubic-bezier(.4,0,.2,1) .05s,opacity .4s ease .05s;
transform-origin:center top;
}
body.reel-active header{transform:translateY(-100%);opacity:0;pointer-events:none}
body.reel-active main{transform:scale(.92) translateY(3vh);opacity:0;pointer-events:none}
body.reel-active footer{opacity:0;pointer-events:none}
.reel-scrim{
position:fixed;inset:0;z-index:999;
background:rgba(3,4,6,.95);
opacity:0;visibility:hidden;
transition:opacity .5s ease,visibility 0s .5s;
}
body.reel-active .reel-scrim{
opacity:1;visibility:visible;
transition:opacity .5s ease,visibility 0s;
}
.reel-player{
position:fixed;inset:0;z-index:1000;
display:flex;align-items:center;justify-content:center;
opacity:0;visibility:hidden;transform:scale(.85);
transition:opacity .5s ease .2s,visibility 0s .8s,transform .5s cubic-bezier(.4,0,.2,1) .2s;
}
body.reel-active .reel-player{
opacity:1;visibility:visible;transform:scale(1);
transition:opacity .5s ease .2s,visibility 0s 0s,transform .5s cubic-bezier(.4,0,.2,1) .2s;
}
.reel-content{display:flex;flex-direction:column;align-items:center;gap:20px}
.reel-close{
position:absolute;top:24px;right:24px;
width:44px;height:44px;border-radius:50%;
background:rgba(255,255,255,.06);border:1px solid var(--line-hi);
display:grid;place-items:center;cursor:pointer;color:var(--text);
transition:background .25s,transform .25s;
}
.reel-close:hover{background:rgba(255,255,255,.14);transform:rotate(90deg)}
.reel-close:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.reel-close svg{width:16px;height:16px}
.reel-soon{
font-family:'IBM Plex Mono',monospace;font-size:.85rem;
letter-spacing:.22em;text-transform:uppercase;color:var(--dim);
}
.reel-video{
max-width:min(92vw,1100px);
max-height:84vh;
width:100%;
border-radius:8px;
background:#000;
box-shadow:0 24px 80px rgba(0,0,0,.55);
outline:none;
}
@media(max-width:768px){
.reel-video{max-width:96vw;max-height:78vh;border-radius:6px}
}
@media(max-width:390px){
.reel-video{max-width:98vw;max-height:72vh;border-radius:4px}
}
/* reveal animation */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
/* ── Site-Wide Scroll Fade-In ── */
.fade-el{
opacity:0;
transform:translateY(12px);
transition:opacity 0.7s ease-out,transform 0.7s ease-out;
}
.fade-el.fade-visible{
opacity:1;
transform:translateY(0);
}
@media(prefers-reduced-motion:reduce){
.fade-el{opacity:1!important;transform:none!important;transition:none!important}
}
/* ---------- focus-visible ---------- */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px;box-shadow:0 0 0 4px rgba(47,184,255,.18)}
.nav-links a:focus-visible{color:var(--text);border-radius:3px}
.nav-cta:focus-visible{border-color:var(--accent);border-radius:8px}
.logo:focus-visible{border-radius:6px;outline-offset:6px}
.burger:focus-visible{border-radius:4px}
.email-card:focus-visible{border-color:var(--accent);border-radius:12px}
.view-link:focus-visible{color:var(--accent);border-radius:3px}
.foot-links a:focus-visible{color:var(--text);border-radius:3px}
@keyframes spin{
from{transform:translate(-50%,-50%) rotate(0deg)}
to{transform:translate(-50%,-50%) rotate(360deg)}
}
@keyframes hero-drift{
0% {transform:scale(1) translate(0,0)}
33% {transform:scale(1.06) translate(2%,-3%)}
66% {transform:scale(1.03) translate(-1%,2%)}
100%{transform:scale(1.05) translate(3%,1%)}
}
@keyframes shimmer{
0%,14%{transform:translateX(-140%) skewX(-5deg)}
40% {transform:translateX(140%) skewX(-5deg)}
100% {transform:translateX(140%) skewX(-5deg)}
}
/* ── Section backgrounds — progressive opacity over fixed video ── */
.hero,#home{background-color:transparent}
#made{background-color:rgba(7,8,12,.88)}
#empowered{background-color:rgba(11,13,20,.92)}
#built{background-color:rgba(11,13,20,.94)}
#contact{background-color:transparent}
footer{background-color:var(--bg)}
/* ── Cinematic Nav Transition ── */
.nav-transition{
position:fixed;inset:0;z-index:2000;
overflow:hidden;
pointer-events:none;opacity:0;visibility:hidden;
}
.nav-transition.active{opacity:1;visibility:visible;pointer-events:auto}
.nav-transition-bg{
position:absolute;inset:0;
background:rgba(7,8,12,.92);
opacity:0;transition:opacity .35s ease;
}
.nav-transition.active .nav-transition-bg{opacity:1}
.nav-transition-title{
position:absolute;top:50%;left:50%;
transform:translate(-50%,-50%) scale(.95);
font-family:'Space Grotesk',sans-serif;
font-size:clamp(1.8rem,4vw,3.5rem);font-weight:600;letter-spacing:.02em;
white-space:nowrap;opacity:0;
transition:opacity .3s ease,transform .3s ease;
}
.nav-transition.phase-title .nav-transition-title{opacity:1;transform:translate(-50%,-50%) scale(1)}
.nav-transition-sweep{position:absolute;inset:0;opacity:0;transition:opacity .3s ease}
.nav-transition.phase-sweep .nav-transition-sweep{opacity:1}
.nav-transition[data-entity="d3d"] .nav-transition-sweep{
background:linear-gradient(90deg,transparent 0%,rgba(47,184,255,.08) 50%,transparent 100%);
animation:sweep-lr .5s ease-out forwards;
}
.nav-transition[data-entity="ringo"] .nav-transition-sweep{
background:linear-gradient(270deg,transparent 0%,rgba(245,166,35,.06) 50%,transparent 100%);
animation:sweep-rl .5s ease-out forwards;
}
.nav-transition[data-entity="arc"] .nav-transition-sweep{
background:linear-gradient(0deg,transparent 0%,rgba(110,99,255,.07) 50%,transparent 100%);
animation:sweep-bt .5s ease-out forwards;
}
@keyframes sweep-lr{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@keyframes sweep-rl{from{transform:translateX(100%)}to{transform:translateX(-100%)}}
@keyframes sweep-bt{from{transform:translateY(100%)}to{transform:translateY(-100%)}}
.nav-transition[data-entity="d3d"] .nav-transition-title{
color:#2FB8FF;
text-shadow:0 0 40px rgba(47,184,255,.3),0 0 80px rgba(47,184,255,.1);
}
.nav-transition[data-entity="ringo"] .nav-transition-title{
color:#F5A623;
text-shadow:0 0 40px rgba(245,166,35,.25),0 0 80px rgba(245,166,35,.08);
}
.nav-transition[data-entity="arc"] .nav-transition-title{
color:#6E63FF;
text-shadow:0 0 40px rgba(110,99,255,.3),0 0 80px rgba(110,99,255,.1);
}
body.nav-transitioning main,
body.nav-transitioning header{
transition:opacity .35s ease,transform .35s ease;
opacity:.3;transform:scale(.98);
}
/* ── Ultra-wide (2560px+) ── */
@media (min-width:2560px){
section{padding-block:var(--space-2xl)}
}
/* ---------- responsive ---------- */
@media (max-width:900px){
.nav-lockup{gap:.35rem;margin-left:1rem}
.nav-lockup-tab{font-size:.9rem}
.lockup-sep{font-size:.6rem}
.hero-proof{font-size:.7rem;margin-top:1.5rem}
.section-socials{gap:1rem;margin-top:1.5rem}
.social-link{font-size:.7rem}
.about-tabs{padding-left:1.25rem}
.contact-grid,.arc-grid,.occ-feature{grid-template-columns:1fr;gap:42px}
.occ-visual{min-height:300px}
.nav-links{
position:fixed;top:calc(72px + var(--safe-top));left:0;right:0;background:linear-gradient(180deg,rgba(13,16,26,.98) 0%,rgba(7,8,12,.97) 100%);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
flex-direction:column;gap:0;padding:8px 0;border-bottom:1px solid var(--line);
transform:translateY(-130%);transition:transform .4s var(--ease);align-items:stretch;
}
.nav-links.open{transform:translateY(0)}
.nav-links a{padding:16px 28px;border-bottom:1px solid var(--line)}
.nav-links a::after{display:none}
.nav-links .nav-cta{margin:14px 28px;text-align:center;border-radius:8px}
.burger{display:flex}
}
/* ── Phone landscape / narrow tablet (≤768px) ── */
@media (max-width:768px){
.section-socials{gap:.75rem}
.film-panels{grid-template-columns:1fr}
}
@media (max-width:640px){
.wrap{padding:0 20px}
section{padding:72px 0}
.hero{padding:100px 0 60px}
.hero h1{font-size:clamp(2.4rem,10vw,3.4rem)}
.hero-play{margin-top:2.4rem}
.film-panels{grid-template-columns:1fr}
.ringo-trailer{aspect-ratio:16/9;border-radius:8px}
.occ-visual{min-height:280px}
.occ-visual-grid{inset:20px}
.occ-node{min-width:94px;font-size:.58rem;letter-spacing:.13em}
.occ-core{width:88px;height:88px;font-size:.86rem}
.about-tabs{padding-left:1rem}
.tab-panels{padding:28px 24px 26px}
.about-tab{padding:0 20px}
form{grid-template-columns:1fr}
.hero-actions .btn{flex:1;justify-content:center}
input,select{min-height:48px}
.eyebrow{font-size:.8rem}
label{font-size:.875rem}
.form-note{font-size:.875rem}
}
/* ── Standard phone (≤568px) ── */
@media (max-width:568px){
h1,h2,h3{margin-bottom:var(--space-sm)}
.section-socials{gap:.5rem}
}
/* ── Small phone (≤375px) ── */
@media (max-width:375px){
.about-card{max-width:100%;overflow-x:hidden}
.nav-lockup{gap:.25rem}
.section-socials{gap:.35rem}
.contact-grid{max-width:100%;overflow-x:hidden}
}
/* ── Touch targets (pointer: coarse) ── */
@media (pointer:coarse){
button,.btn,.nav-links a,.nav-cta,.about-tab,.nav-lockup-tab,.social-link,[role="tab"]{min-height:48px}
input,textarea,select{min-height:48px;font-size:16px}
}
/* ── High-DPI / Retina ── */
@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){
.about-card{border-width:.5px}
}
/* ── Landscape phone (short viewport) ── */
@media (max-height:500px) and (orientation:landscape){
.hero,#home{min-height:auto;padding-block:var(--space-lg)}
header{padding-block:.25rem}
}
@media (prefers-reduced-motion:reduce){
*{animation:none!important;scroll-behavior:auto!important}
.reveal{opacity:1;transform:none;transition:none}
header,main,footer,.reel-player,.reel-scrim{transition:none!important}
.lbl-short,.lbl-full,.about-bg,.about-tab,.tab-panel,.panel-content,.about-img{transition:none!important}
.panel-content{animation:none!important}
.nav-lockup-tab,.lockup-short,.lockup-full{transition:none!important}
.nav-transition,.nav-transition-bg,.nav-transition-title,.nav-transition-sweep{transition:none!important;animation:none!important}
.cta-border-wrap,.cta-border-wrap::after{animation:none!important;transition:none!important}
.bg-video{transition:none}
.hero-spotlight{display:none}
.hero-play{animation:none!important}
}
/* ── Mouse-Following Glow Spot System ── */
.glow-follow{position:relative;overflow:hidden;}
.glow-spot-wrap{
position:absolute;inset:0;
overflow:hidden;border-radius:inherit;
pointer-events:none;z-index:0;
-webkit-mask-image:linear-gradient(to right,transparent 0%,black 15%,black 85%,transparent 100%);
mask-image:linear-gradient(to right,transparent 0%,black 15%,black 85%,transparent 100%);
}
.glow-spot{
position:absolute;top:50%;left:0;
transform:translateX(var(--glow-tx,0px)) translateY(-50%);
width:160px;height:160px;
pointer-events:none;opacity:0;
transition:opacity .3s ease;
}
.glow-spot-inner{
position:absolute;inset:0;border-radius:50%;
background:radial-gradient(50% 50% at 50% 50%,rgba(255,255,255,.25) 0%,rgba(47,184,255,.15) 40%,rgba(47,184,255,0) 100%);
filter:blur(4px);
}
.glow-spot-inner--blue{
background:radial-gradient(50% 50% at 50% 50%,rgba(255,255,255,.22) 0%,rgba(47,184,255,.18) 40%,rgba(47,184,255,0) 100%);
}
.glow-spot-inner--amber{
background:radial-gradient(50% 50% at 50% 50%,rgba(255,255,255,.22) 0%,rgba(245,166,35,.18) 40%,rgba(245,166,35,0) 100%);
}
.glow-spot-inner--violet{
background:radial-gradient(50% 50% at 50% 50%,rgba(255,255,255,.22) 0%,rgba(90,79,224,.18) 40%,rgba(90,79,224,0) 100%);
}
@media(pointer:coarse){.glow-spot-wrap{display:none}}
/* ── Animated Border Gradient CTA ── */
@property --cta-border-angle{
syntax:"";
initial-value:0deg;
inherits:false;
}
@keyframes cta-border-spin{to{--cta-border-angle:360deg}}
.cta-border-wrap{
position:relative;overflow:visible;display:inline-flex;flex-shrink:0;
padding:2px;border-radius:9999px;
background:conic-gradient(from 0deg,#2FB8FF,#6E63FF,#2FB8FF);
background:conic-gradient(
from var(--cta-border-angle,0deg),
#2FB8FF 0%,#5A4FE0 25%,#6E63FF 50%,#2FB8FF 75%,#5A4FE0 100%
);
animation:cta-border-spin 8s linear infinite;
}
.cta-border-wrap::after{
content:'';position:absolute;inset:0;border-radius:9999px;
background:conic-gradient(
from var(--cta-border-angle,0deg),
rgba(47,184,255,.15) 0%,rgba(90,79,224,.10) 25%,
rgba(110,99,255,.12) 50%,rgba(47,184,255,.15) 75%,rgba(90,79,224,.10) 100%
);
animation:cta-border-spin 8s linear infinite;
filter:blur(8px);z-index:-1;pointer-events:none;
transition:filter .3s ease,opacity .3s ease;
}
.cta-border-wrap:hover::after{filter:blur(12px)}
.cta-border-wrap > .btn,
.cta-border-wrap > .btn:hover{
background:var(--card);
border:none;
border-radius:9999px;
}
/* ── Hero Cursor Spotlight ── */
.hero-spotlight{
position:absolute;inset:0;z-index:1;
pointer-events:none;overflow:hidden;
mix-blend-mode:screen;
background:radial-gradient(
circle 280px at var(--spot-x,50%) var(--spot-y,50%),
rgba(90,79,224,.22) 0%,rgba(47,184,255,.12) 30%,transparent 65%
);
opacity:0;transition:opacity .5s ease;
}
.hero-spotlight.active{opacity:1}
/* ── Gradient Hero Headline ── */
.hero h1{
background:linear-gradient(135deg,#FFFFFF 0%,#FFFFFF 60%,#d5d8f6 85%,#c8cbf0 100%);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
}
/* ── Word-by-Word Scroll Reveal ── */
.reveal-word{
display:inline-block;
opacity:0.18;
transform:scale(0.92);
transform-origin:center baseline;
transition:opacity 0.5s ease,transform 0.45s cubic-bezier(.22,.61,.36,1);
will-change:opacity,transform;
vertical-align:baseline;
}
@media(prefers-reduced-motion:reduce){
.reveal-word{opacity:1!important;transform:none!important;transition:none!important}
}
/* ── Form feedback messages ── */
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.form-msg{
grid-column:1/-1;
margin-top:1rem;padding:.75rem 1rem;
border-radius:8px;
font-family:'Inter',system-ui,sans-serif;font-size:.9rem;
animation:fadeIn .3s ease;
}
.form-msg--success{
color:#2FB8FF;
background:rgba(47,184,255,.08);
border:1px solid rgba(47,184,255,.2);
}
.form-msg--error{
color:#FF6B6B;
background:rgba(255,107,107,.08);
border:1px solid rgba(255,107,107,.2);
}
/* ── TRC Teaser Modal ── */
.trc-modal-overlay{
position:fixed;inset:0;z-index:1000;
display:flex;align-items:center;justify-content:center;
background:rgba(0,0,0,.85);
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
opacity:0;visibility:hidden;
transition:opacity .4s ease,visibility .4s ease;
}
.trc-modal-overlay.is-active{
opacity:1;visibility:visible;
}
.trc-modal{
position:relative;
max-width:540px;width:90%;
padding:2.5rem 2rem;
background:var(--card);
border:1px solid rgba(47,184,255,.1);
border-radius:16px;text-align:center;
transform:scale(.92) translateY(12px);
transition:transform .4s cubic-bezier(.16,1,.3,1);
box-shadow:0 0 60px rgba(47,184,255,.06),0 20px 40px rgba(0,0,0,.4);
}
.trc-modal-overlay.is-active .trc-modal{
transform:scale(1) translateY(0);
}
.trc-modal-close{
position:absolute;top:1rem;right:1rem;
background:none;border:none;
color:var(--dim);font-size:1.5rem;
cursor:pointer;padding:.25rem .5rem;line-height:1;
transition:color .2s ease;
}
.trc-modal-close:hover,
.trc-modal-close:focus-visible{color:var(--text)}
.trc-modal-title{
font-family:'Space Grotesk',sans-serif;
font-size:clamp(1.25rem,2.5vw,1.5rem);
font-weight:600;color:var(--text);
margin-bottom:1.5rem;
}
.trc-modal .trc-countdown-display{margin-bottom:1.5rem}
.trc-modal-body{
font-family:'Inter',sans-serif;
font-size:.925rem;line-height:1.65;
color:var(--dim);margin-bottom:1.5rem;
}
.trc-modal-body em{color:var(--text);font-style:italic}
.trc-modal-link{
display:inline-block;
font-family:'Inter',sans-serif;font-size:.875rem;font-weight:500;
color:var(--accent);text-decoration:none;
padding:.6rem 1.5rem;
border:1px solid rgba(47,184,255,.3);border-radius:9999px;
transition:background .2s ease,border-color .2s ease;
margin-bottom:2rem;
}
.trc-modal-link:hover,
.trc-modal-link:focus-visible{
background:rgba(47,184,255,.08);
border-color:rgba(47,184,255,.5);
}
.trc-modal-socials{
border-top:1px solid rgba(255,255,255,.06);
padding-top:1.25rem;
}
.trc-modal-socials-heading{
font-family:'IBM Plex Mono',monospace;
font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;
color:var(--dim-2);margin-bottom:.75rem;
}
.trc-modal-socials-links{
display:flex;justify-content:center;gap:1.25rem;
}
.trc-modal-socials-links a{
color:var(--dim);transition:color .2s ease;
}
.trc-modal-socials-links a:hover,
.trc-modal-socials-links a:focus-visible{color:var(--accent)}
@media(prefers-reduced-motion:reduce){
.trc-modal-overlay{transition:none}
.trc-modal{transition:none;transform:none}
}
/* ===== Dev Modal eyebrow (Prompt 8) ===== */
#devModal .modal-eyebrow{
font-family:'IBM Plex Mono',monospace;
font-size:.72rem;
letter-spacing:.12em;
text-transform:uppercase;
color:var(--accent,#2FB8FF);
margin:0 0 .5rem;
}
/* ── Hero Button Lightning Surge ── */
.btn-lightning,
.btn-lightning-glow{
position:absolute;
pointer-events:none;
mix-blend-mode:screen;
}
.btn-lightning{
left:0;top:0;width:100%;height:100%;
clip-path:inset(0 calc(100% - var(--lx,50%) - 15px) 0 calc(var(--lx,50%) - 15px));
background:linear-gradient(180deg,
transparent 0%,
rgba(47,184,255,.5) 8%,
rgba(180,230,255,.95) 18%,
rgba(230,248,255,1) 50%,
rgba(180,230,255,.95) 82%,
rgba(47,184,255,.5) 92%,
transparent 100%);
animation:lightningCrackle .15s linear infinite;
}
.btn-lightning-glow{
width:100px;height:100px;
left:calc(var(--lx,50%) - 50px);
top:calc(var(--ly,50%) - 50px);
border-radius:50%;
opacity:.7;
background:radial-gradient(circle at center,rgba(90,79,224,.6) 0%,rgba(110,99,255,.35) 40%,transparent 70%);
}
.lightning-fade{
animation:none!important;
opacity:0!important;
transition:opacity 300ms ease!important;
}
@keyframes lightningCrackle{
0% {transform:translateX(0);opacity:1.0}
12% {transform:translateX(2px);opacity:.7}
25% {transform:translateX(-1px);opacity:.9}
37% {transform:translateX(1.5px);opacity:.6}
50% {transform:translateX(-2px);opacity:1.0}
62% {transform:translateX(0);opacity:.8}
75% {transform:translateX(1px);opacity:.7}
87% {transform:translateX(-1.5px);opacity:.9}
100%{transform:translateX(0);opacity:1.0}
}
@media(prefers-reduced-motion:reduce){
.btn-lightning,.btn-lightning-glow{opacity:0!important}
}
/* ────────────────────────────────────────────────
BUG PASS 002 PATCH OVERRIDES
Scope: scroll unlock hardening, hero CTA lightning rods,
play-button glitch, reel-hover reset support, text reveal.
──────────────────────────────────────────────── */
/* Emergency scroll stabilization: JS adds .js-scroll-lock-active only while
a real modal/reel is open. Without that class, the page must remain scrollable
even if a stale inline overflow:hidden survives a reload or bfcache restore. */
html,
body{
min-height:100%;
}
html:not(.js-scroll-lock-active),
body:not(.js-scroll-lock-active){
overflow-y:auto!important;
}
html.js-scroll-lock-active,
body.js-scroll-lock-active{
overflow:hidden!important;
}
/* Hero CTA lightning rods: replaces the square/vertical flash with top and
bottom energy rods that follow --lx from the existing JS mouse tracker. */
.hero-actions .btn{
position:relative;
overflow:hidden;
isolation:isolate;
}
.btn-lightning{
position:absolute;
inset:0;
pointer-events:none;
mix-blend-mode:screen;
opacity:1;
clip-path:none;
background:none;
transform:none;
animation:none;
z-index:2;
}
.btn-lightning::before,
.btn-lightning::after{
content:"";
position:absolute;
left:calc(var(--lx,50%) - 44px);
width:88px;
height:2px;
border-radius:999px;
background:linear-gradient(90deg,
transparent 0%,
rgba(47,184,255,.15) 12%,
rgba(150,225,255,.95) 38%,
#fff 50%,
rgba(110,99,255,.95) 62%,
rgba(47,184,255,.15) 88%,
transparent 100%);
box-shadow:
0 0 8px rgba(47,184,255,.95),
0 0 18px rgba(110,99,255,.55),
0 0 32px rgba(47,184,255,.28);
filter:saturate(1.4);
animation:lightningRodCrackle .18s steps(2,end) infinite,
lightningRodWidth .9s ease-in-out infinite alternate;
}
.btn-lightning::before{top:2px;}
.btn-lightning::after{bottom:2px;animation-delay:.08s;}
.btn-lightning-glow{
width:128px;
height:100%;
left:calc(var(--lx,50%) - 64px);
top:0;
border-radius:999px;
opacity:.55;
background:radial-gradient(ellipse at center,
rgba(255,255,255,.18) 0%,
rgba(47,184,255,.22) 32%,
rgba(110,99,255,.14) 54%,
transparent 76%);
filter:blur(6px);
z-index:1;
}
@keyframes lightningRodCrackle{
0%{transform:translateX(0) scaleY(1);opacity:.95}
25%{transform:translateX(1px) scaleY(1.4);opacity:1}
50%{transform:translateX(-1px) scaleY(.9);opacity:.8}
75%{transform:translateX(2px) scaleY(1.2);opacity:1}
100%{transform:translateX(0) scaleY(1);opacity:.92}
}
@keyframes lightningRodWidth{
from{width:72px;left:calc(var(--lx,50%) - 36px)}
to{width:104px;left:calc(var(--lx,50%) - 52px)}
}
/* Play button glitch: keeps the circle readable while adding rotating,
broken-ring patterns around it instead of clipping the whole button. */
.hero-play{
overflow:visible;
}
.hero-play::before,
.hero-play::after{
content:"";
position:absolute;
inset:-2px;
border-radius:50%;
pointer-events:none;
opacity:0;
border:1px solid rgba(47,184,255,.7);
box-shadow:0 0 18px rgba(47,184,255,.35),0 0 34px rgba(110,99,255,.18);
}
.hero-play::after{
inset:-6px;
border-color:rgba(110,99,255,.55);
}
.hero-play:hover,
.hero-play.glitch-pulse{
animation:playButtonMicroGlitch .55s steps(3,end) infinite,
playButtonRotator 1.4s cubic-bezier(.22,.61,.36,1) infinite;
}
.hero-play:hover::before,
.hero-play.glitch-pulse::before{
opacity:1;
animation:playRingBreakA .72s steps(4,end) infinite;
}
.hero-play:hover::after,
.hero-play.glitch-pulse::after{
opacity:.75;
animation:playRingBreakB .92s steps(5,end) infinite reverse;
}
.hero-play:hover svg,
.hero-play.glitch-pulse svg{
animation:playIconGlitchSpin .85s steps(4,end) infinite;
}
@keyframes playButtonMicroGlitch{
0%,100%{filter:none;translate:0 0}
20%{filter:saturate(1.7) brightness(1.15);translate:-1px 1px}
38%{filter:hue-rotate(16deg) brightness(1.25);translate:2px -1px}
57%{filter:blur(.7px) saturate(1.8);translate:-2px 0}
76%{filter:brightness(1.1);translate:1px 2px}
}
@keyframes playButtonRotator{
0%{rotate:0deg}
18%{rotate:4deg}
31%{rotate:-7deg}
49%{rotate:11deg}
66%{rotate:-4deg}
82%{rotate:2deg}
100%{rotate:0deg}
}
@keyframes playRingBreakA{
0%{clip-path:polygon(50% 0,100% 0,100% 22%,62% 22%,62% 0);transform:rotate(0deg) scale(1)}
25%{clip-path:polygon(0 18%,55% 18%,55% 36%,0 36%);transform:rotate(35deg) scale(1.03)}
50%{clip-path:polygon(44% 78%,100% 78%,100% 100%,44% 100%);transform:rotate(100deg) scale(.98)}
75%{clip-path:polygon(0 0,28% 0,28% 100%,0 100%);transform:rotate(210deg) scale(1.04)}
100%{clip-path:polygon(50% 0,100% 0,100% 22%,62% 22%,62% 0);transform:rotate(360deg) scale(1)}
}
@keyframes playRingBreakB{
0%{clip-path:polygon(0 0,100% 0,100% 12%,0 12%);transform:rotate(0deg) scale(1)}
25%{clip-path:polygon(88% 0,100% 0,100% 100%,88% 100%);transform:rotate(-50deg) scale(1.06)}
50%{clip-path:polygon(0 86%,100% 86%,100% 100%,0 100%);transform:rotate(-130deg) scale(.97)}
75%{clip-path:polygon(0 0,14% 0,14% 100%,0 100%);transform:rotate(-240deg) scale(1.04)}
100%{clip-path:polygon(0 0,100% 0,100% 12%,0 12%);transform:rotate(-360deg) scale(1)}
}
@keyframes playIconGlitchSpin{
0%,100%{transform:rotate(0deg) translate(0,0)}
25%{transform:rotate(8deg) translate(1px,-1px)}
50%{transform:rotate(-12deg) translate(-1px,1px)}
75%{transform:rotate(16deg) translate(1px,0)}
}
/* Scroll dialogue reveal: grows on entry, shrinks back when outside viewport,
and adds a light guardian-blue outline/glow without changing copy/layout. */
.fade-el{
opacity:0;
transform:translateY(14px) scale(.985);
transform-origin:center center;
transition:opacity .7s ease-out,transform .7s cubic-bezier(.22,.61,.36,1),
text-shadow .7s ease,-webkit-text-stroke-color .7s ease;
will-change:opacity,transform;
}
.fade-el.fade-visible{
opacity:1;
transform:translateY(0) scale(1.035);
text-shadow:
0 0 1px rgba(124,218,255,.7),
0 0 10px rgba(47,184,255,.18),
0 0 24px rgba(47,184,255,.10);
}
h1.fade-visible,
h2.fade-visible,
h3.fade-visible,
.lead.fade-visible{
-webkit-text-stroke:.35px rgba(124,218,255,.55);
}
@media(prefers-reduced-motion:reduce){
html:not(.js-scroll-lock-active),body:not(.js-scroll-lock-active){overflow-y:auto!important}
.btn-lightning,.btn-lightning-glow{display:none!important}
.hero-play,.hero-play::before,.hero-play::after,.hero-play svg{animation:none!important}
.fade-el,.fade-el.fade-visible{opacity:1!important;transform:none!important;text-shadow:none!important;-webkit-text-stroke:0!important}
}
/* BUG_PASS_002B_EMERGENCY_SCROLL_INPUT_FIX_START */
/* Emergency input-scroll stabilization.
Purpose: allow mouse wheel, laptop touchpad, and phone finger scrolling when no real modal/reel is active. */
html:not(.js-scroll-lock-active),
body:not(.js-scroll-lock-active){
overflow-y:auto!important;
overscroll-behavior-y:auto!important;
touch-action:pan-y!important;
-ms-touch-action:pan-y!important;
}
body:not(.js-scroll-lock-active) main,
body:not(.js-scroll-lock-active) header,
body:not(.js-scroll-lock-active) footer{
pointer-events:auto!important;
}
body:not(.reel-active) .reel-scrim,
body:not(.reel-active) .reel-player,
.trc-modal-overlay:not(.is-active),
#devModal:not(.is-active),
.nav-transition:not(.active){
pointer-events:none!important;
}
@media (max-width:900px){
.nav-links:not(.open){
pointer-events:none!important;
}
.nav-links.open{
pointer-events:auto!important;
}
}
/* Scroll-reactive dialogue/text effect:
fades in, grows near viewport center, then compacts when leaving view. */
.scroll-reactive-text{
--scroll-reactive-scale:1;
--scroll-reactive-opacity:.48;
--scroll-reactive-y:10px;
transform:translateY(var(--scroll-reactive-y)) scale(var(--scroll-reactive-scale))!important;
opacity:var(--scroll-reactive-opacity)!important;
transform-origin:center center;
transition:
opacity .18s ease-out,
transform .18s ease-out,
text-shadow .18s ease-out,
-webkit-text-stroke-color .18s ease-out;
will-change:transform,opacity,text-shadow;
}
.scroll-reactive-text.is-reactive-active{
text-shadow:
0 0 1px rgba(127,220,255,.95),
0 0 8px rgba(47,184,255,.42),
0 0 18px rgba(47,184,255,.20)!important;
-webkit-text-stroke:0.35px rgba(127,220,255,.28);
}
@media(prefers-reduced-motion:reduce){
.scroll-reactive-text{
transform:none!important;
opacity:1!important;
transition:none!important;
}
}
/* BUG_PASS_002B_EMERGENCY_SCROLL_INPUT_FIX_END */
/* BUG_PASS_002D_NATIVE_SCROLL_SPEED_START */
/* Restore native mouse wheel / touchpad / finger scroll feel. */
html,
body{
scroll-behavior:auto!important;
}
html:not(.js-scroll-lock-active),
body:not(.js-scroll-lock-active){
overflow-y:auto!important;
touch-action:auto!important;
-ms-touch-action:auto!important;
}
/* BUG_PASS_002D_NATIVE_SCROLL_SPEED_END */
/* BUG_PASS_002E_TEXT_CLEANUP_START */
/* Emergency typography cleanup.
Removes the smeared blue outline/glow/scale effect from Bug Pass 002B.
Keeps the scroll fixes intact. */
.scroll-reactive-text,
.scroll-reactive-text.is-reactive-active,
.fade-el,
.fade-el.fade-visible{
opacity:1!important;
transform:none!important;
filter:none!important;
text-shadow:none!important;
-webkit-text-stroke:0 transparent!important;
transition:opacity .35s ease, transform .35s ease!important;
will-change:auto!important;
}
main h1,
main h2,
main h3,
main h4,
main p,
main li,
main .lead,
main blockquote{
filter:none!important;
text-shadow:none!important;
-webkit-text-stroke:0 transparent!important;
}
/* BUG_PASS_002E_TEXT_CLEANUP_END */
/* BATCH011_FINAL_REGRESSION_AND_MOBILE_MICRO_POLISH_START */
@media (max-width:430px){
.hero-actions{
width:min(100%,21rem);
max-width:100%;
flex-direction:column;
align-items:stretch;
gap:12px;
}
.hero-actions > .btn,
.hero-actions .cta-border-wrap{
width:100%;
max-width:100%;
min-width:0;
flex:0 1 auto;
}
.hero-actions .cta-border-wrap{
display:flex;
}
.hero-actions .cta-border-wrap > .btn{
width:100%;
max-width:100%;
min-width:0;
}
.hero-actions .btn{
justify-content:center;
white-space:nowrap;
}
.company-contact-card .tab-panels{
padding:28px 20px 26px;
}
.email-card{
max-width:100%;
min-width:0;
gap:14px;
padding:18px;
pointer-events:auto;user-select:text;
}
.email-card > :not(.ico),
.email-text-wrap{
min-width:0;
max-width:100%;
}
.email-card .val{
display:inline-block;
max-width:100%;
overflow-wrap:anywhere;
word-break:normal;
line-height:1.25;
font-size:clamp(.92rem,4vw,1rem);
}
}
@media (max-width:360px){
.email-card{
align-items:flex-start;
flex-direction:column;
gap:12px;
}
.email-copy-button{
align-self:flex-start;
}
}
/* BATCH011_FINAL_REGRESSION_AND_MOBILE_MICRO_POLISH_END */