/* ============================================================= AKU WORLD · pyra.css (2026-09-28) Book 2 launch: "Signal Split" hero + Launch Bay store drawer, shared by the homepage (top spot) and /pyra (the books page). 1 · Hero tokens + registered seam property 2 · Worlds: Ibra (blue) under, Pyra (red) clipped on top 3 · Seam: rim line + glow 4 · Particles, scrim, scanlines, glitch slices 5 · HUD tags 6 · Layout: copy / books / actions 7 · Intro timeline (pure CSS, so it runs without JS) 8 · Launch Bay drawer (right drawer desktop, bottom sheet phone) 9 · Homepage glue (game section no longer tucks under the nav) 10 · Reduced motion The resting state is the END of the intro, so no-JS, crawlers and reduced-motion all get the finished split. ============================================================= */ /* ---------- 1 · tokens ---------- */ @property --dx{ syntax:''; inherits:true; initial-value:0%; } .ph{ --py-lime:#DDF046; /* cover AKU lime, CTA */ --py-ember:#FF6A2B; /* lava orange */ --py-gold:#FFC247; /* gem light */ --py-night:#07060C; /* base under both worlds */ --st:69%; /* seam x at the top edge */ --sb:49%; /* seam x at the bottom edge */ --dx:0%; /* intro offset (animated) */ --mx:0; --my:0; /* pointer parallax, set by pyra.js */ /* Ibra holds the LEFT (copy side), Pyra the RIGHT (the new book) */ --pyra-clip:polygon(calc(var(--st) + var(--dx)) 0, 100% 0, 100% 100%, calc(var(--sb) + var(--dx)) 100%); --ibra-clip:polygon(0 0, calc(var(--st) + var(--dx)) 0, calc(var(--sb) + var(--dx)) 100%, 0 100%); } /* ---------- 2 · section + worlds ---------- */ .ph{ position:relative; isolation:isolate; overflow:hidden; color:#fff; background:var(--py-night); min-height:100vh; min-height:100svh; margin-top:calc(-1 * var(--nav-h)); padding-top:var(--nav-h); display:flex; flex-direction:column; } .ph__worlds{ position:absolute; inset:0; z-index:0; pointer-events:none; } .ph__side{ position:absolute; inset:0; overflow:hidden; } .ph__side--pyra{ clip-path:var(--pyra-clip); } .ph__pic{ position:absolute; inset:-3%; display:block; transform:translate3d(calc(var(--mx) * -10px), calc(var(--my) * -8px), 0); } .ph__pic img{ width:100%; height:100%; object-fit:cover; display:block; } .ph__side--ibra .ph__pic img{ object-position:40% 55%; filter:saturate(1.1) brightness(.8); } /* zoom into the lava so the red side is lava, not sky */ .ph__side--pyra .ph__pic img{ object-position:50% 100%; transform:scale(1.28); transform-origin:58% 92%; } /* ---------- 3 · seam ---------- */ .ph__rim{ position:absolute; inset:0; z-index:3; background:linear-gradient(180deg,#FFF1B8 0%,#FFB347 22%,var(--py-ember) 46%,#9FE3FF 72%,#3FB4FF 100%); clip-path:polygon(calc(var(--st) + var(--dx) - 1.5px) 0, calc(var(--st) + var(--dx) + 1.5px) 0, calc(var(--sb) + var(--dx) + 1.5px) 100%, calc(var(--sb) + var(--dx) - 1.5px) 100%); } .ph__glowwrap{ position:absolute; inset:0; z-index:2; filter:blur(16px); opacity:.9; } .ph__glowwrap i{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,194,71,.9),rgba(255,106,43,.85) 45%,rgba(63,180,255,.85)); clip-path:polygon(calc(var(--st) + var(--dx) - 14px) 0, calc(var(--st) + var(--dx) + 14px) 0, calc(var(--sb) + var(--dx) + 14px) 100%, calc(var(--sb) + var(--dx) - 14px) 100%); } /* ---------- 4 · particles, scrim, scan, glitch ---------- */ .ph__embers, .ph__spores{ position:absolute; inset:0; z-index:5; overflow:hidden; } .ph__embers{ clip-path:var(--pyra-clip); } .ph__spores{ clip-path:var(--ibra-clip); } .ph__embers i, .ph__spores i{ position:absolute; bottom:-12px; left:var(--x); width:var(--s,3px); height:var(--s,3px); border-radius:50%; opacity:0; will-change:transform,opacity; animation:ph-rise-p var(--t,8s) linear var(--d,0s) infinite; } .ph__embers i{ background:#FFC247; box-shadow:0 0 6px 1px rgba(255,120,40,.9), 0 0 14px rgba(255,90,30,.6); } .ph__spores i{ background:#9FF3FF; box-shadow:0 0 6px 1px rgba(63,180,255,.9); animation-duration:calc(var(--t,8s) * 1.5); } @keyframes ph-rise-p{ 0% { transform:translate3d(0,0,0); opacity:0; } 10% { opacity:.95; } 70% { opacity:.7; } 100%{ transform:translate3d(var(--w,20px), -78vh, 0); opacity:0; } } .ph__scrim{ position:absolute; inset:0; z-index:4; background: linear-gradient(180deg, rgba(5,4,12,.7) 0%, rgba(5,4,12,0) 22%), linear-gradient(0deg, rgba(5,4,12,.55) 0%, rgba(5,4,12,0) 16%), radial-gradient(55% 45% at 12% 88%, rgba(4,6,18,.62), rgba(4,6,18,0) 70%), linear-gradient(90deg, rgba(4,6,18,.82) 0%, rgba(4,6,18,.6) 30%, rgba(4,6,18,0) 50%); } .ph__scan{ position:absolute; inset:0; z-index:6; opacity:.55; mix-blend-mode:overlay; background:repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 1px, transparent 1px 3px); } /* glitch slices: bands of the Pyra world that tear in during the switch */ .ph__glitch{ position:absolute; inset:0; z-index:7; overflow:hidden; } .ph__glitch i{ position:absolute; inset:-3%; opacity:0; background:url(../images/pyra/pyra-world.jpg) 50% 80% / cover no-repeat; } .ph__glitch i:nth-child(1){ clip-path:inset(12% 0 74% 0); --j:-38px; } .ph__glitch i:nth-child(2){ clip-path:inset(38% 0 49% 0); --j:54px; mix-blend-mode:screen; filter:hue-rotate(190deg) saturate(1.3) brightness(1.1); } .ph__glitch i:nth-child(3){ clip-path:inset(61% 0 30% 0); --j:-70px; } .ph__glitch i:nth-child(4){ clip-path:inset(80% 0 9% 0); --j:30px; mix-blend-mode:screen; filter:hue-rotate(190deg) saturate(1.3) brightness(1.1); } /* ---------- 5 · HUD ---------- */ .ph__hud{ position:absolute; inset:var(--nav-h) 0 0 0; z-index:8; pointer-events:none; font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; } .ph__tag{ position:absolute; display:inline-flex; align-items:center; gap:8px; color:rgba(255,255,255,.72); text-shadow:0 1px 8px rgba(0,0,0,.6); white-space:nowrap; } .ph__tag b{ color:#fff; font-weight:400; } .ph__tag--tl{ top:18px; left:var(--gut); } .ph__tag--tr{ top:18px; right:var(--gut); } .ph__tag--bl{ bottom:22px; left:var(--gut); } .ph__tag--br{ bottom:22px; right:var(--gut); color:#9FE3FF; } .ph__blink{ width:7px; height:7px; border-radius:50%; background:var(--py-ember); box-shadow:0 0 10px var(--py-ember); animation:ph-blink 1.4s steps(2,start) infinite; } @keyframes ph-blink{ to{ visibility:hidden; } } .ph__dest{ position:relative; display:inline-block; min-width:4.6ch; } .ph__dest span{ color:var(--py-lime); } .ph__dest .is-ibra{ position:absolute; left:0; top:0; color:#9FE3FF; opacity:0; } /* ---------- 6 · layout ---------- */ .ph__inner{ position:relative; z-index:9; flex:1; width:100%; max-width:1360px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"copy books" "act books"; align-content:center; column-gap:clamp(24px,4vw,80px); row-gap:clamp(16px,2.6vh,30px); padding:clamp(48px,8vh,84px) var(--gut) clamp(56px,9vh,96px); } .ph__copy{ grid-area:copy; align-self:end; max-width:620px; } .ph__act{ grid-area:act; align-self:start; max-width:620px; } .ph__books{ grid-area:books; align-self:center; } .ph__kicker{ display:flex; align-items:center; gap:12px; margin:0 0 clamp(14px,2vh,22px); font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.82); } .ph__kicker::before{ content:""; width:28px; height:1px; background:var(--py-ember); box-shadow:0 0 8px var(--py-ember); flex:none; } .ph__kicker em{ font-style:italic; } .ph__title{ margin:0; font-family:var(--display); font-weight:900; text-transform:uppercase; font-size:clamp(2.4rem,4.5vw,4.4rem); line-height:.9; letter-spacing:-.005em; text-wrap:balance; background:linear-gradient(180deg,#FFFFFF 30%,#DDEBFF 62%,#98C8FF 100%); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 4px 24px rgba(0,0,0,.45)); } .ph__sub{ margin:clamp(14px,2.2vh,22px) 0 0; font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:clamp(.95rem,1.45vw,1.3rem); letter-spacing:.05em; line-height:1.25; color:#fff; } .ph__sub b{ color:var(--py-gold); font-weight:800; text-shadow:0 0 18px rgba(255,160,50,.55); } .ph__date{ position:relative; display:inline-flex; align-items:center; gap:.6em; margin:0 0 clamp(18px,2.6vh,26px); padding:11px 18px; font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:clamp(.82rem,1.05vw,.98rem); letter-spacing:.07em; color:var(--py-lime); border:1px solid rgba(63,180,255,.55); background:rgba(6,14,32,.5); box-shadow:inset 0 0 18px rgba(63,180,255,.12), 0 0 22px rgba(63,180,255,.14); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); } .ph__date::before, .ph__date::after{ content:""; position:absolute; width:10px; height:10px; border:2px solid #3FB4FF; } .ph__date::before{ top:-4px; left:-4px; border-right:0; border-bottom:0; } .ph__date::after{ bottom:-4px; right:-4px; border-left:0; border-top:0; } .ph__date span{ color:rgba(255,255,255,.7); font-weight:500; } .ph__ctas{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; } .ph__cta{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.5em; min-height:56px; padding:0 30px; border:0; border-radius:2px; cursor:pointer; font-family:var(--display); font-weight:800; font-size:clamp(.9rem,1.05vw,1rem); letter-spacing:.09em; text-transform:uppercase; color:#14100A; background:var(--py-lime); box-shadow:0 0 0 1px rgba(221,240,70,.6), 0 10px 40px -8px rgba(221,240,70,.55); transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast), background var(--dur-fast); } .ph__cta::before{ content:"[\00a0"; opacity:.5; } .ph__cta::after{ content:"\00a0]"; opacity:.5; } .ph__cta:hover{ transform:translateY(-2px); background:#E9FA6A; box-shadow:0 0 0 1px #E9FA6A, 0 0 0 6px rgba(221,240,70,.16), 0 16px 48px -8px rgba(221,240,70,.7); } .ph__cta:active{ transform:translateY(0); } .ph__cta .ph__cta-ic{ width:14px; height:14px; flex:none; } .ph__cta:focus-visible{ outline:2px solid #fff; outline-offset:4px; } .ph__alt{ appearance:none; background:none; border:0; padding:0; min-height:44px; display:inline-flex; align-items:center; gap:.4em; cursor:pointer; color:rgba(255,255,255,.86); font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; text-decoration:underline; text-decoration-color:rgba(159,227,255,.45); text-underline-offset:7px; text-decoration-thickness:1px; transition:color var(--dur-fast), text-decoration-color var(--dur-fast); } .ph__alt:hover{ color:#9FE3FF; text-decoration-color:#9FE3FF; } .ph__links{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px; } .ph__alt--go b{ color:var(--py-lime); } .ph__alt--go{ text-decoration-color:rgba(221,240,70,.5); } .ph__alt--go:hover{ color:var(--py-lime); text-decoration-color:var(--py-lime); } /* /pyra: cue down to the story, so the page doesn't read as a repeat of the homepage */ .ph__cue{ display:inline-flex; align-items:center; gap:10px; min-height:44px; margin-top:6px; color:rgba(255,255,255,.72); text-decoration:none; font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; } .ph__cue i{ width:9px; height:9px; border-right:1.5px solid var(--py-lime); border-bottom:1.5px solid var(--py-lime); transform:rotate(45deg) translateY(-3px); animation:ph-cue 1.8s ease-in-out infinite; } .ph__cue:hover{ color:#fff; } @keyframes ph-cue{ 0%,100%{ translate:0 0; } 50%{ translate:0 4px; } } .ph__alt b{ color:#9FE3FF; font-weight:400; } .ph__creds{ list-style:none; margin:clamp(20px,3vh,30px) 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px 22px; font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.8); } .ph__creds li{ display:inline-flex; align-items:center; gap:9px; } .ph__creds svg{ width:15px; height:15px; flex:none; color:var(--py-lime); filter:drop-shadow(0 0 6px rgba(221,240,70,.5)); } .ph__creds em{ font-style:italic; } /* books: Pyra front on the red side, Ibra behind on the blue side */ .ph__books{ position:relative; margin:0; --bh:min(clamp(300px, calc(100svh - var(--nav-h) - 190px), 600px), calc(42vw / 1.06)); height:var(--bh); width:calc(var(--bh) * 1.06); } .ph__book{ position:absolute; margin:0; aspect-ratio:618/926; } .ph__float{ position:absolute; inset:0; border-radius:2px 4px 4px 2px; } .ph__float img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:inherit; } .ph__float::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(90deg, rgba(0,0,0,.34) 0, rgba(255,255,255,.18) 1.6%, rgba(0,0,0,.12) 3.6%, transparent 7%), linear-gradient(115deg, rgba(255,255,255,.14) 0%, transparent 32%); } .ph__book--pyra{ height:100%; right:0; top:0; z-index:2; transform:translate3d(calc(var(--mx) * 12px), calc(var(--my) * 10px), 0) rotate(3deg); } .ph__book--pyra .ph__float{ box-shadow:0 40px 70px -24px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.07), 0 0 90px -10px rgba(255,106,43,.55); } .ph__book--ibra{ height:84%; left:0; top:9%; z-index:1; transform:translate3d(calc(var(--mx) * 6px), calc(var(--my) * 5px), 0) rotate(-5deg); } .ph__book--ibra .ph__float{ box-shadow:0 34px 60px -24px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.07), 0 0 70px -10px rgba(63,180,255,.55); } .ph__book--ibra img{ filter:brightness(.9) saturate(1.05); } .ph__gem{ position:absolute; left:50%; top:47%; width:44%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; pointer-events:none; mix-blend-mode:screen; background:radial-gradient(circle, rgba(255,236,170,.95) 0%, rgba(255,190,80,.55) 22%, rgba(255,120,40,.18) 45%, transparent 68%); animation:ph-gem 3.2s ease-in-out 2s infinite; opacity:.55; } @keyframes ph-gem{ 0%,100%{ opacity:.35; transform:translate(-50%,-50%) scale(.9); } 50%{ opacity:.85; transform:translate(-50%,-50%) scale(1.08); } } .ph__bookbtn{ position:absolute; inset:0; z-index:3; display:block; appearance:none; border:0; padding:0; background:none; cursor:pointer; border-radius:inherit; } .ph__bookbtn:focus-visible{ outline:2px solid #fff; outline-offset:4px; } /* ---------- 6b · tablets + phones ---------- */ @media (max-width:1080px) and (min-width:761px){ .ph{ --st:72%; --sb:54%; } .ph__title{ font-size:clamp(2.2rem,5vw,3.6rem); } } /* phones AND portrait tablets: stacked poster (title, books, actions) */ @media (max-width:760px), (max-width:1100px) and (max-aspect-ratio:4/5){ .ph{ --st:64%; --sb:34%; } .ph__side--pyra .ph__pic img{ transform:scale(1.12); transform-origin:50% 80%; } /* phones: no HUD readouts (Micah 2026-09-28), room goes to the books + CTA */ .ph__hud{ display:none; } .ph__scrim{ background: linear-gradient(180deg, rgba(5,4,12,.82) 0%, rgba(5,4,12,.35) 30%, rgba(5,4,12,0) 46%), linear-gradient(0deg, rgba(5,4,12,.92) 0%, rgba(5,4,12,.66) 24%, rgba(5,4,12,0) 46%); } .ph__inner{ display:flex; flex-direction:column; align-items:center; justify-content:flex-start; text-align:center; gap:12px; padding:20px 18px 14px; } /* first screen = title, big books, then date + Pre-order + chips on the bottom edge. Credentials + Mission brief sit just below the fold: the hero is one screen plus that block (its height is measured into --ph-meta by pyra.js; 96px fallback). */ .ph{ min-height:calc(100svh + var(--ph-meta, 96px) + 30px); } .ph__meta{ display:flex; flex-direction:column; align-items:center; gap:6px; width:100%; margin-top:30px; } .ph__copy, .ph__act{ max-width:none; width:100%; display:flex; flex-direction:column; align-items:center; } .ph__kicker{ font-size:clamp(10px,2.6vw,13px); letter-spacing:.16em; margin-bottom:10px; gap:8px; } .ph__kicker::before{ width:16px; } .ph__title{ font-size:clamp(1.75rem,8.3vw,4.6rem); line-height:.94; text-wrap:wrap; } .ph__sub{ margin-top:8px; font-size:clamp(.78rem,3.3vw,1.25rem); letter-spacing:.04em; } /* the books take whatever height is left, so the CTA never drops below the fold. Size containment + container units size the pair from that leftover box. */ .ph__books{ flex:1 1 0; min-height:150px; width:100%; height:auto; container-type:size; } /* pair width = 1.0 x cover height (tighter overlap than desktop) so the covers can run bigger */ .ph__book{ --H:min(100cqh, 100cqw); } .ph__book--pyra{ height:var(--H); top:calc(50% - var(--H) / 2); right:calc(50% - var(--H) * .5); left:auto; } .ph__book--ibra{ height:calc(var(--H) * .84); top:calc(50% - var(--H) * .41); left:calc(50% - var(--H) * .5); right:auto; } .ph__date{ margin-bottom:12px; padding:9px 14px; font-size:clamp(.72rem,3vw,1rem); } .ph__ctas{ flex-direction:column; gap:10px; width:100%; } .ph__cta{ width:100%; max-width:380px; min-height:54px; font-size:.9rem; } .ph__links{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:8px; width:100%; max-width:380px; } /* two-line chips: small lead-in over the bold action */ .ph__alt{ display:grid; align-content:center; justify-items:center; gap:2px; text-align:center; text-decoration:none; padding:5px 10px; font-size:9.5px; letter-spacing:.12em; line-height:1.25; color:rgba(255,255,255,.7); border:1px solid rgba(159,227,255,.32); border-radius:2px; background:rgba(6,12,28,.45); } .ph__alt b{ font-size:11.5px; letter-spacing:.1em; } .ph__alt--go{ border-color:rgba(221,240,70,.45); } .ph__cue{ margin-top:0; min-height:44px; font-size:10px; } .ph__creds{ margin-top:0; justify-content:center; gap:5px 14px; font-size:clamp(10.5px,2.7vw,12.5px); letter-spacing:.08em; } .ph__creds svg{ width:12px; height:12px; } .ph__glitch i{ background-image:url(../images/pyra/pyra-world-m.jpg); background-position:50% 70%; } } @media (min-width:761px) and (max-width:1100px) and (max-aspect-ratio:4/5){ .ph__glitch i{ background-image:url(../images/pyra/pyra-world.jpg); } .ph__inner{ padding:56px 40px 18px; } } @media (max-width:760px) and (max-height:700px){ .ph__inner{ gap:10px; padding-top:14px; } .ph__date{ margin-bottom:8px; padding:7px 12px; } .ph__cta{ min-height:50px; } } /* ---------- 7 · intro timeline (1.9s) ---------- 0.00 Ibra only, HUD reads DESTINATION: IBRA 0.30 signal tears: Pyra flashes in bands, twice 0.60 Pyra floods the whole screen 0.95 seam slides in from the right, Ibra holds the blue side copy rises from 0.5s, Ibra cover slides in with the seam */ .ph{ animation:ph-intro 1.9s cubic-bezier(.2,.8,.2,1) both; } @keyframes ph-intro{ 0%,15% { --dx:100%; } 16% { --dx:-80%; } 19% { --dx:100%; } 24% { --dx:-80%; } 26% { --dx:100%; } 31%,50% { --dx:-80%; } 100% { --dx:0%; } } .ph__glitch i{ animation:ph-slice 1.9s linear both; } .ph__glitch i:nth-child(2){ animation-delay:.03s; } .ph__glitch i:nth-child(3){ animation-delay:.06s; } @keyframes ph-slice{ 0%,13% { opacity:0; transform:translateX(0); } 14% { opacity:1; transform:translateX(var(--j)); } 18% { opacity:1; transform:translateX(calc(var(--j) * -.6)); } 22% { opacity:0; } 25% { opacity:1; transform:translateX(calc(var(--j) * .8)); } 29% { opacity:1; transform:translateX(calc(var(--j) * -.3)); } 33%,100%{ opacity:0; transform:translateX(0); } } .ph__scan{ animation:ph-scan 1.9s linear both; } @keyframes ph-scan{ 0%,12%{ opacity:.55; } 14%,32%{ opacity:1; } 40%,100%{ opacity:.55; } } .ph__rim, .ph__glowwrap{ animation:ph-rim 1.9s linear both; } @keyframes ph-rim{ 0%,48%{ opacity:0; } 60%,100%{ opacity:1; } } .ph__glowwrap{ opacity:.9; } /* ambient: the seam hiccups every 9s after the intro */ .ph__rimwrap{ position:absolute; inset:0; z-index:3; animation:ph-hiccup 9s steps(1,end) 3s infinite; } @keyframes ph-hiccup{ 0%,95%{ transform:none; opacity:1; } 96%{ transform:translateX(4px); opacity:.4; } 97%{ transform:translateX(-3px); opacity:1; } 98%{ transform:translateX(2px); opacity:.6; } 99%{ transform:none; opacity:1; } } .ph__dest .is-pyra{ animation:ph-dest-p 1.9s steps(1,end) both; } .ph__dest .is-ibra{ animation:ph-dest-i 1.9s steps(1,end) both; } @keyframes ph-dest-p{ 0%{ opacity:0; } 16%{ opacity:1; } 19%{ opacity:0; } 24%{ opacity:1; } 26%{ opacity:0; } 31%,100%{ opacity:1; } } @keyframes ph-dest-i{ 0%{ opacity:1; } 16%{ opacity:0; } 19%{ opacity:1; } 24%{ opacity:0; } 26%{ opacity:1; } 31%,100%{ opacity:0; } } .ph__book--pyra .ph__float{ animation:ph-book-in 1.9s cubic-bezier(.2,.8,.2,1) both; } @keyframes ph-book-in{ 0%,15% { opacity:0; transform:translateY(18px) scale(1.04); } 16% { opacity:1; transform:translate(-7px,0) scale(1.04); filter:drop-shadow(-5px 0 0 rgba(255,40,90,.8)) drop-shadow(5px 0 0 rgba(40,220,255,.8)); } 19% { opacity:0; } 24% { opacity:1; transform:translate(6px,0) scale(1.03); filter:drop-shadow(4px 0 0 rgba(255,40,90,.8)) drop-shadow(-4px 0 0 rgba(40,220,255,.8)); } 27% { opacity:.35; } 31% { opacity:1; transform:translate(0,0) scale(1.02); filter:none; } 60%,100%{ opacity:1; transform:none; filter:none; } } .ph__book--ibra .ph__float{ animation:ph-ibra-in 1.9s cubic-bezier(.2,.8,.2,1) both; } @keyframes ph-ibra-in{ 0%,52%{ opacity:0; transform:translateX(-60px); } 100%{ opacity:1; transform:none; } } /* after the intro the Pyra book breathes */ .ph__book--pyra{ animation:ph-bob 6s ease-in-out 2.2s infinite; } @keyframes ph-bob{ 0%,100%{ translate:0 0; } 50%{ translate:0 -8px; } } .ph__copy > *, .ph__act > *{ animation:ph-up .8s var(--ease-out) both; } .ph__copy > :nth-child(1){ animation-delay:.45s; } .ph__copy > :nth-child(2){ animation-delay:.52s; } .ph__copy > :nth-child(3){ animation-delay:.62s; } .ph__act > :nth-child(1){ animation-delay:.9s; } .ph__act > :nth-child(2){ animation-delay:.98s; } .ph__act > :nth-child(3){ animation-delay:1.08s; } @keyframes ph-up{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } } /* ---------- 7b · recurring glitch ---------- After the intro, pyra.js marks the hero .ph--settled (intro animations off, so nothing replays) and then adds .ph--glitch for 0.9s every 5 to 8 seconds. One full planet flash per burst (A = Ibra floods in, B = Pyra floods in), plus lava bands, a seam jitter and a color split on the covers. */ .ph.ph--settled, .ph--settled .ph__glitch i, .ph--settled .ph__scan, .ph--settled .ph__rim, .ph--settled .ph__glowwrap, .ph--settled .ph__dest span, .ph--settled .ph__book .ph__float, .ph--settled .ph__copy > *, .ph--settled .ph__act > *, .ph--settled .ph__rimwrap{ animation:none; } /* the clip shapes must resolve where the burst animates --dx, so redeclare them here */ .ph__worlds{ --pyra-clip:polygon(calc(var(--st) + var(--dx)) 0, 100% 0, 100% 100%, calc(var(--sb) + var(--dx)) 100%); --ibra-clip:polygon(0 0, calc(var(--st) + var(--dx)) 0, calc(var(--sb) + var(--dx)) 100%, 0 100%); } .ph--glitch .ph__worlds{ animation:ph-g-dx .9s linear both; } .ph--glitch.ph--glitch-b .ph__worlds{ animation-name:ph-g-dx-b; } @keyframes ph-g-dx { 0%,19%{ --dx:0%; } 20%,31%{ --dx:100%; } 32%,100%{ --dx:0%; } } @keyframes ph-g-dx-b{ 0%,19%{ --dx:0%; } 20%,31%{ --dx:-80%; } 32%,100%{ --dx:0%; } } .ph--settled.ph--glitch .ph__glitch i{ animation:ph-g-slice .9s linear both; } .ph--settled.ph--glitch .ph__glitch i:nth-child(2){ animation-delay:.03s; } .ph--settled.ph--glitch .ph__glitch i:nth-child(3){ animation-delay:.06s; } @keyframes ph-g-slice{ 0%,8% { opacity:0; transform:none; } 9% { opacity:1; transform:translateX(var(--j)); } 16% { opacity:1; transform:translateX(calc(var(--j) * -.6)); } 20% { opacity:0; } 36% { opacity:1; transform:translateX(calc(var(--j) * .5)); } 44%,100%{ opacity:0; transform:none; } } .ph--settled.ph--glitch .ph__scan{ animation:ph-g-scan .9s linear both; } @keyframes ph-g-scan{ 0%,8%{ opacity:.55; } 10%,44%{ opacity:1; } 60%,100%{ opacity:.55; } } .ph--settled.ph--glitch .ph__rimwrap{ animation:ph-g-rim .9s steps(1,end) both; } @keyframes ph-g-rim{ 0%{ transform:none; opacity:1; } 10%{ transform:translateX(5px); opacity:.5; } 16%{ transform:translateX(-4px); opacity:1; } 36%{ transform:translateX(3px); } 44%,100%{ transform:none; opacity:1; } } .ph--settled.ph--glitch .ph__book .ph__float{ animation:ph-g-book .9s steps(1,end) both; } .ph--settled.ph--glitch .ph__book--ibra .ph__float{ animation-delay:.05s; } @keyframes ph-g-book{ 0% { filter:none; transform:none; } 10% { filter:drop-shadow(-5px 0 0 rgba(255,40,90,.8)) drop-shadow(5px 0 0 rgba(40,220,255,.8)); transform:translateX(-3px); } 16% { filter:none; transform:none; } 22% { filter:drop-shadow(4px 0 0 rgba(255,40,90,.8)) drop-shadow(-4px 0 0 rgba(40,220,255,.8)); transform:translateX(3px); } 32%,100%{ filter:none; transform:none; } } .ph--settled.ph--glitch:not(.ph--glitch-b) .ph__dest .is-pyra{ animation:ph-g-dp .9s steps(1,end) both; } .ph--settled.ph--glitch:not(.ph--glitch-b) .ph__dest .is-ibra{ animation:ph-g-di .9s steps(1,end) both; } @keyframes ph-g-dp{ 0%{ opacity:1; } 20%{ opacity:0; } 32%,100%{ opacity:1; } } @keyframes ph-g-di{ 0%{ opacity:0; } 20%{ opacity:1; } 32%,100%{ opacity:0; } } /* ---------- 8 · Launch Bay ---------- */ .bay{ position:fixed; inset:0; z-index:400; --acc:var(--bay-pyra); --bay-pyra:#FF6A2B; --bay-ibra:#3FB4FF; } .bay[hidden]{ display:none; } .bay[data-book="ibra"]{ --acc:var(--bay-ibra); } .bay__backdrop{ position:absolute; inset:0; background:rgba(3,4,10,.62); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); opacity:0; transition:opacity .35s var(--ease-out); } .bay__panel{ position:absolute; top:0; right:0; bottom:0; width:min(480px,100vw); display:flex; flex-direction:column; background:linear-gradient(180deg, color-mix(in srgb, var(--acc) 16%, #0A0B12) 0%, #0A0B12 34%); color:#fff; border-left:1px solid color-mix(in srgb, var(--acc) 55%, transparent); box-shadow:-30px 0 80px -20px rgba(0,0,0,.7), inset 1px 0 0 rgba(255,255,255,.04); transform:translateX(104%); transition:transform .5s cubic-bezier(.16,1,.3,1), background .35s, border-color .35s; overflow:auto; overscroll-behavior:contain; outline:none; } .bay.is-open .bay__backdrop{ opacity:1; } .bay.is-open .bay__panel{ transform:none; } .bay__panel::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; background:repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px); } .bay__grab{ display:none; } .bay__head{ position:relative; padding:28px 84px 18px 28px; } .bay__hud{ margin:0 0 10px; font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--acc); text-shadow:0 0 12px color-mix(in srgb, var(--acc) 60%, transparent); } .bay__title{ margin:0; font-family:var(--display); font-weight:900; text-transform:uppercase; font-size:clamp(1.5rem,2.4vw,1.9rem); line-height:.98; letter-spacing:.005em; } .bay__x{ position:absolute; top:18px; right:18px; width:42px; height:42px; display:grid; place-items:center; appearance:none; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); border-radius:2px; color:#fff; font-size:22px; line-height:1; cursor:pointer; transition:background var(--dur-fast), border-color var(--dur-fast); } .bay__x:hover{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.4); } .bay__tabs{ display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:0 28px; } .bay__tab{ appearance:none; text-align:left; cursor:pointer; padding:12px 14px; border-radius:2px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.7); font-family:var(--body); font-size:14px; font-weight:600; line-height:1.2; transition:background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast); } .bay__tab span{ display:block; margin-bottom:5px; font-family:var(--mono); font-size:10px; font-weight:400; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.5); } .bay__tab em{ display:block; margin-top:4px; font-style:normal; font-family:var(--mono); font-size:10px; font-weight:400; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.5); } .bay__tab:hover{ border-color:rgba(255,255,255,.34); color:#fff; } .bay__tab[aria-selected="true"]{ color:#fff; border-color:var(--acc); background:color-mix(in srgb, var(--acc) 16%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--acc) 40%, transparent); } .bay__tab[aria-selected="true"] span, .bay__tab[aria-selected="true"] em{ color:var(--acc); } .bay__pane{ padding:20px 28px 8px; } .bay__pane[hidden]{ display:none; } .bay__book{ display:flex; align-items:center; gap:16px; margin-bottom:18px; } .bay__book img{ width:62px; height:auto; aspect-ratio:618/926; object-fit:cover; flex:none; border-radius:1px 3px 3px 1px; box-shadow:0 10px 24px -8px rgba(0,0,0,.8), 0 0 28px -6px color-mix(in srgb, var(--acc) 70%, transparent); } .bay__name{ margin:0; font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:1rem; letter-spacing:.03em; } .bay__meta{ margin:6px 0 0; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.62); line-height:1.5; } .bay__stores{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:8px; } .bay__store{ position:relative; display:flex; align-items:center; gap:10px; min-height:60px; padding:0 14px; border:1px solid rgba(255,255,255,.14); border-radius:2px; background:rgba(255,255,255,.03); color:#fff; text-decoration:none; font-family:var(--body); font-weight:600; font-size:15px; line-height:1.15; transition:background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast) var(--ease-out); } .bay__n{ font-family:var(--mono); font-weight:400; font-size:10px; letter-spacing:.14em; color:rgba(255,255,255,.42); flex:none; } .bay__s{ flex:1; min-width:0; } .bay__go{ flex:none; font-size:14px; color:var(--acc); transition:transform var(--dur-fast) var(--ease-out); } .bay__store:hover{ background:color-mix(in srgb, var(--acc) 18%, transparent); border-color:var(--acc); transform:translateY(-1px); } .bay__store:hover .bay__go{ transform:translate(2px,-2px); } .bay__store:focus-visible{ outline:2px solid #fff; outline-offset:2px; } .bay__store[aria-disabled="true"]{ cursor:default; color:rgba(255,255,255,.5); } .bay__store[aria-disabled="true"]:hover{ background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.14); transform:none; } .bay__store[aria-disabled="true"] .bay__go{ font-family:var(--mono); font-size:9px; letter-spacing:.16em; color:rgba(255,255,255,.4); } .bay__pub{ display:flex; align-items:center; justify-content:center; gap:10px; min-height:64px; padding:0 18px; border-radius:2px; background:#DDF046; color:#14100A; text-decoration:none; font-family:var(--display); font-weight:800; font-size:.95rem; letter-spacing:.06em; text-transform:uppercase; box-shadow:0 10px 40px -10px rgba(221,240,70,.6); } .bay__pub:hover{ background:#E9FA6A; } .bay__share{ appearance:none; display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 14px; margin:-12px 0; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.18); border-radius:2px; color:#fff; cursor:pointer; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; } .bay__share svg{ width:15px; height:15px; color:var(--acc); } .bay__share:hover{ border-color:var(--acc); } .bay__foot{ align-items:center; } /* tiles power up in sequence when the bay opens or the book switches */ .bay.is-open .bay__store{ animation:bay-tile .5s var(--ease-out) both; animation-delay:calc(.12s + var(--i,0) * 40ms); } @keyframes bay-tile{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } } .bay.is-switch .bay__pane:not([hidden]){ animation:bay-glitch .32s steps(4,end) both; } @keyframes bay-glitch{ 0%{ transform:translateX(-6px); opacity:.4; } 50%{ transform:translateX(4px); opacity:.8; } 100%{ transform:none; opacity:1; } } .bay__foot{ margin-top:auto; padding:18px 28px calc(24px + env(safe-area-inset-bottom)); display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 16px; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5); border-top:1px solid rgba(255,255,255,.08); } .bay__foot a{ color:rgba(255,255,255,.78); text-decoration:none; border-bottom:1px solid rgba(255,255,255,.3); } .bay__foot a:hover{ color:var(--acc); border-color:var(--acc); } @media (max-width:760px){ .bay__panel{ top:auto; left:0; width:100%; max-height:90svh; border-left:0; border-top:1px solid color-mix(in srgb, var(--acc) 55%, transparent); transform:translateY(104%); box-shadow:0 -30px 80px -20px rgba(0,0,0,.7); touch-action:pan-y; } .bay.is-dragging .bay__panel{ transition:none; } .bay__grab{ display:block; width:44px; height:4px; margin:10px auto 0; border-radius:2px; background:rgba(255,255,255,.3); flex:none; } .bay__head{ padding:14px 68px 14px 20px; } .bay__x{ top:10px; right:12px; } .bay__tabs{ padding:0 20px; } .bay__tab{ padding:10px 12px; font-size:13px; } .bay__pane{ padding:16px 20px 6px; } .bay__book{ margin-bottom:14px; } .bay__book img{ width:48px; } .bay__store{ min-height:54px; font-size:14px; padding:0 12px; } .bay__foot{ padding:14px 20px calc(18px + env(safe-area-inset-bottom)); } } @media (max-width:760px) and (max-height:700px){ .bay__head{ padding-top:8px; padding-bottom:10px; } .bay__title{ font-size:1.25rem; } .bay__hud{ margin-bottom:6px; } .bay__tab{ padding:8px 10px; } .bay__tab em{ display:none; } .bay__pane{ padding-top:12px; } .bay__book{ margin-bottom:10px; } .bay__book img{ width:38px; } .bay__store{ min-height:48px; } .bay__foot{ padding-top:10px; } } /* ---------- 8b · sticky launch bar (phones + portrait tablets) ---------- */ .lbar{ position:fixed; z-index:300; left:10px; right:10px; bottom:calc(10px + env(safe-area-inset-bottom)); display:flex; align-items:center; gap:8px; padding:8px 8px 8px 14px; border-radius:2px; color:#fff; background:rgba(9,8,16,.82); border:1px solid rgba(255,255,255,.14); -webkit-backdrop-filter:blur(16px) saturate(1.3); backdrop-filter:blur(16px) saturate(1.3); box-shadow:0 18px 40px -12px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06); transform:translateY(calc(100% + 30px)); opacity:0; visibility:hidden; transition:transform .45s var(--ease-out), opacity .3s, visibility 0s linear .45s; } .lbar.is-on{ transform:none; opacity:1; visibility:visible; transition:transform .45s var(--ease-out), opacity .3s, visibility 0s; } .lbar__info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; } .lbar__k{ font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.6); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .lbar__t{ font-family:var(--display); font-weight:800; font-size:.7rem; letter-spacing:.04em; text-transform:uppercase; color:#fff; white-space:nowrap; } .lbar__t b{ color:#DDF046; font-weight:800; } .lbar__share{ appearance:none; flex:none; width:44px; height:44px; display:grid; place-items:center; cursor:pointer; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18); border-radius:2px; color:#fff; } .lbar__share svg{ width:18px; height:18px; } .lbar__cta{ flex:none; display:inline-flex; align-items:center; min-height:44px; padding:0 13px; border-radius:2px; background:#DDF046; color:#14100A; text-decoration:none; font-family:var(--display); font-weight:800; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; box-shadow:0 8px 26px -8px rgba(221,240,70,.7); } .lbar__cta::before{ content:"[\00a0"; opacity:.5; } .lbar__cta::after{ content:"\00a0]"; opacity:.5; } @media (min-width:1101px), (min-width:761px) and (min-aspect-ratio:4/5){ .lbar{ display:none; } } @media (max-width:413px){ .lbar__tm{ display:none; } } /* toast for "link copied" */ .ph-toast{ position:fixed; z-index:500; left:50%; bottom:calc(84px + env(safe-area-inset-bottom)); max-width:min(92vw,420px); transform:translate(-50%,12px); opacity:0; pointer-events:none; padding:12px 16px; border-radius:2px; text-align:center; background:#0A0B12; color:#fff; border:1px solid rgba(221,240,70,.5); box-shadow:0 14px 40px -12px rgba(0,0,0,.8); font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; transition:opacity .25s, transform .25s var(--ease-out); } .ph-toast.is-on{ opacity:1; transform:translate(-50%,0); } /* intro plays once per visit (html.ph-skip is set in from sessionStorage) */ .ph-skip .ph, .ph-skip .ph__glitch i, .ph-skip .ph__scan, .ph-skip .ph__rim, .ph-skip .ph__glowwrap, .ph-skip .ph__dest span, .ph-skip .ph__book .ph__float, .ph-skip .ph__copy > *, .ph-skip .ph__act > *{ animation:none !important; } /* lime bracket button, shared by both pages */ .btn.btn--lava{ --bg:#DDF046; --fg:#14100A; --edge:#DDF046; } .btn.btn--lava:hover{ --bg:#E9FA6A; --fg:#14100A; --edge:#E9FA6A; box-shadow:0 0 0 3px rgba(221,240,70,.22); } /* ---------- 9 · homepage glue ---------- */ /* the Book Quiz game used to be the nav-tucked top hero; Pyra is now */ .ph ~ .playgame{ margin-top:0; } .ph ~ .playgame .playgame__hero .playgame__tag--tl, .ph ~ .playgame .playgame__hero .playgame__tag--tr{ top:clamp(26px,3.6vw,50px); } /* 9b · phones show the same information as desktop (Micah 2026-09-28): Book 1 synopsis + its Get Your Copy button, and the quiz game labels */ @media (max-width:760px){ .bookfeat__synopsis{ display:block !important; order:4; margin:16px auto 0; } .bookfeat__insidecta{ order:5; } .bookfeat__ctas{ order:6; } .bookfeat__ctas .btn--solid{ display:inline-flex; } } @media (max-width:640px){ .playgame__hero .playgame__tag{ display:inline-block; font-size:9px; letter-spacing:.12em; padding:5px 8px; } .playgame__hero .playgame__tag--tl{ left:16px; } .playgame__hero .playgame__tag--tr{ right:16px; } .playgame__objective{ display:block; position:relative; left:auto; bottom:auto; transform:none; z-index:3; margin-top:22px; max-width:32ch; white-space:normal; text-align:center; line-height:1.7; font-size:10px; } } /* ---------- 10 · reduced motion ---------- */ @media (prefers-reduced-motion:reduce){ .ph, .ph *, .ph *::before, .ph *::after{ animation:none !important; } .ph{ --dx:0%; } .ph__glitch, .ph__embers, .ph__spores{ display:none; } .ph__dest .is-ibra{ opacity:0; } .ph__pic, .ph__book--pyra, .ph__book--ibra{ transition:none; } .bay__panel, .bay__backdrop{ transition:none; } .bay.is-open .bay__store, .bay.is-switch .bay__pane:not([hidden]){ animation:none; } .lbar, .ph-toast{ transition:none; } .ph__cue i{ animation:none; } }