:root{color-scheme:dark;--ink:#f2efe8;--reading:#d6d3cd;--muted:#a7adb7;--accent:#6194e6;--serif:ui-serif,"New York",Georgia,serif;--sans:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;--focus:35%} *{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#0b0e13;color:var(--ink)}body{font-family:var(--sans);-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,main:focus-visible{outline:2px solid var(--accent);outline-offset:5px}button{border:0;background:none}button,a{touch-action:manipulation}.universe{position:fixed;inset:0;pointer-events:none}.universe>img,.universe>video{position:absolute;width:100%;height:100%;object-fit:cover;object-position:var(--focus) center}.universe video{opacity:0}.universe video.ready{opacity:1}body[data-video=ready] .poster{opacity:0}.shade{position:absolute;inset:0;background:rgba(0,0,0,.5)}header{position:fixed;z-index:5;top:0;left:0;width:100%;padding:24px 24px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:27px;font-weight:600;letter-spacing:-.8px}.brand img{width:42px;height:42px}.header-actions{display:flex;align-items:center;gap:40px}.audience{display:none}.language-toggle{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;font-size:12px;letter-spacing:.08em;color:var(--reading)}.language-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}.language-toggle:hover,.language-toggle[aria-expanded=true]{color:var(--ink)} #story{position:fixed;inset:0;overflow-y:auto;overflow-x:hidden;scroll-snap-type:y mandatory;overscroll-behavior-y:contain;scrollbar-width:none}#story::-webkit-scrollbar{display:none}.panel{height:100%;min-height:640px;position:relative;scroll-snap-align:start;scroll-snap-stop:normal;display:flex;align-items:flex-start;padding:112px 24px 78px}.copy{width:100%;max-width:510px;position:relative;z-index:2;text-shadow:0 2px 28px #000,0 1px 7px #0008}.eyebrow{font-size:11px;font-weight:500;letter-spacing:.18em;margin:0 0 20px;color:var(--muted);display:flex;align-items:center;gap:11px}.eyebrow:before{content:"";height:11px;width:1px;background:#f2efe866}h1,h2{font-family:var(--serif);font-size:clamp(38px,10vw,56px);font-weight:500;line-height:1.05;letter-spacing:-1.3px;margin:0 0 19px;text-wrap:balance}.description{font-size:17px;line-height:1.6;font-weight:400;max-width:370px;margin:0;color:var(--reading);text-wrap:pretty}.detail{font-size:12px;letter-spacing:.05em;margin-top:22px;color:var(--muted)}.explore{display:inline-flex;align-items:center;gap:28px;min-height:44px;margin-top:13px;font-size:14px}.explore span:last-child{font-size:21px}.device{position:fixed;z-index:3;right:27px;bottom:76px;height:46svh;max-height:440px;aspect-ratio:1520 / 3068;margin:0;pointer-events:none;filter:drop-shadow(0 22px 28px #0008)}.display{position:absolute;left:6.578947%;top:3.259452%;width:86.842105%;height:93.481095%;overflow:hidden;border-radius:9% / 4.142%;background:#050609}.display img{width:100%;height:100%;object-fit:cover;display:block}.device-frame{position:absolute;inset:0;width:100%;height:100%;display:block}.bottom-bar{position:fixed;z-index:5;bottom:max(24px,env(safe-area-inset-bottom));left:24px;right:24px;height:42px;display:flex;align-items:center;justify-content:space-between;gap:10px}.scroll-cue{font-size:10px;letter-spacing:.02em;display:flex;align-items:center;gap:10px;padding:0;min-height:44px;text-align:left}.cue-line{position:relative;width:1px;height:29px;background:#ffffff35;overflow:hidden}.cue-line:after{content:"";position:absolute;top:-50%;left:0;width:1px;height:50%;background:var(--ink);animation:cue 2.8s ease-in-out infinite}@keyframes cue{to{transform:translateY(90px)}}.chapters{display:flex;align-items:center;gap:0}.chapters button{width:23px;min-height:44px;position:relative;padding:0}.chapters button:before{content:"";display:block;margin:auto;width:4px;height:4px;border-radius:4px;background:#ffffff65;transition:height .3s,background .3s}.chapters button[aria-current=step]:before{height:18px;background:var(--ink)}.chapter-count{display:none}footer{position:fixed;z-index:5;bottom:max(12px,env(safe-area-inset-bottom));left:24px;display:flex;gap:24px;color:var(--muted);font-size:14px;line-height:1.5}body[data-panel="6"] .bottom-bar{bottom:calc(max(24px,env(safe-area-inset-bottom)) + 18px)}footer[hidden]{display:none}.stores{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}.store{display:flex;align-items:center;gap:9px;border:1px solid #b4b5b66b;border-radius:9px;background:#090b0ecc;padding:9px 13px;min-height:52px;text-shadow:none}.store:hover{background:#20242bcc}.store svg{width:21px;height:25px}.store span{text-align:left}.store small{display:block;font-size:9px;line-height:1.3;letter-spacing:.02em}.store strong{display:block;font-size:17px;font-weight:500;line-height:1.2}.google{color:#c5c8ce}.store-status{font-size:13px;line-height:1.4;max-width:300px;color:var(--reading);margin:10px 0 0}.no-script{position:fixed;z-index:10;bottom:0;background:#141922;padding:20px;width:100%} @media(min-width:760px) and (min-aspect-ratio:751/1000){:root{--focus:50%}header{padding:30px 5%}.brand{font-size:32px;gap:12px}.brand img{width:52px;height:52px}.audience{display:block;font-size:11px;letter-spacing:.1em;color:var(--reading)}.panel{align-items:center;padding:110px 7.8% 100px;min-height:640px}.copy{max-width:48%}.eyebrow{font-size:12px;margin-bottom:28px}h1,h2{font-size:clamp(48px,5.6vw,88px);letter-spacing:-2.5px;line-height:1.05;margin-bottom:26px}.description{font-size:20px;max-width:415px;line-height:1.65}.detail{font-size:13px;margin-top:32px}.explore{font-size:15px;margin-top:28px}.device{right:11%;top:50%;bottom:auto;transform:translateY(-50%);height:88vh;max-height:880px}.bottom-bar{bottom:32px;left:5%;right:5%}.scroll-cue{font-size:11px;gap:15px}.chapters{position:absolute;left:50%;transform:translateX(-50%);gap:13px}.chapters button{width:30px}.chapter-count{display:flex;align-items:center;gap:14px;font-size:11px;letter-spacing:.1em;color:var(--muted)}#current{color:var(--ink)}.count-line{width:48px;height:1px;background:#ffffff4d}footer{left:7.8%;bottom:16px;font-size:15px;gap:30px}body[data-panel="6"] .bottom-bar{bottom:32px}.stores{gap:13px;margin-top:32px}.store{min-width:155px;min-height:58px;padding:10px 16px}.store svg{width:24px;height:29px}.store small{font-size:10px}.store strong{font-size:19px}} @media(min-width:760px) and (min-aspect-ratio:751/1000) and (max-height:740px){.device{height:86vh}h1,h2{font-size:56px}.panel{min-height:550px}.description{font-size:18px}.eyebrow{margin-bottom:20px}} @media(max-width:759px) and (max-height:740px){.panel{padding-top:91px;min-height:570px}h1,h2{font-size:36px;margin-bottom:13px}.eyebrow{margin-bottom:14px}.description{font-size:15px;max-width:320px}.device{height:38svh;bottom:56px}.detail{margin-top:12px}.stores{margin-top:14px}.explore{margin-top:6px}.store{padding:8px 10px;min-height:48px}.store strong{font-size:15px}footer{bottom:max(8px,env(safe-area-inset-bottom));font-size:13px;gap:18px}.bottom-bar{bottom:16px}body[data-panel="6"] .bottom-bar{bottom:calc(max(16px,env(safe-area-inset-bottom)) + 16px)}} @media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}#story{scroll-behavior:auto}} /* Mobile: full-width device, upper portion visible in the lower half of the viewport. "Mobile" is also any portrait screen 3:4 or narrower -- a tablet held upright takes the phone layout (owner, 2026-09-30: side by side, the phone covered the words at 820x1180). The same query is `mobile` in app.js. */ @media(max-width:759px),(max-aspect-ratio:3/4){ .device{ top:50dvh; left:8%; right:auto; bottom:auto; width:84%; height:auto; max-height:none; aspect-ratio:1520 / 3068; transform:none; clip-path:inset(0 0 max(0px, calc(100% - 50dvh)) 0); } } /* Right-edge chapter navigation, shared by desktop and mobile. */ .chapters{ position:fixed; top:50%; right:max(12px, env(safe-area-inset-right)); bottom:auto; left:auto; transform:translateY(-50%); flex-direction:column; gap:2px; } .chapters button{width:32px;min-height:36px} @media(min-width:760px) and (min-aspect-ratio:751/1000){ .chapters{right:24px;gap:6px} } @media(max-width:759px),(max-aspect-ratio:3/4){ .scroll-cue{display:none} } /* Only mobile store buttons share the device's horizontal bounds. */ @media(max-width:759px),(max-aspect-ratio:3/4){ :is(#scene-1, #scene-6) .stores{ position:fixed; display:none; margin:0; flex-wrap:nowrap; gap:10px; left:8%; width:84%; top:50dvh; transform:translateY(calc(-100% - 14px)); } body[data-panel="1"] #scene-1 .stores, body[data-panel="6"] #scene-6 .stores{display:flex} /* Panel 6 shows the lock-screen notification, and iOS draws it at the BOTTOM of the screen -- the half the phone's usual top-half crop never reaches (product owner, 2026-09-21). On this panel alone the phone is anchored above the bottom bar and its lower half is the visible half, fading in at the same 50dvh line the other panels cut at. */ body[data-panel="6"] .device{top:auto;bottom:calc(max(24px, env(safe-area-inset-bottom)) + 72px);clip-path:none;--cut:linear-gradient(to bottom, transparent calc(100% - 50dvh + 152px), rgba(0,0,0,.1) calc(100% - 50dvh + 172px), rgba(0,0,0,.45) calc(100% - 50dvh + 196px), rgba(0,0,0,.85) calc(100% - 50dvh + 220px), #000 calc(100% - 50dvh + 236px));-webkit-mask-image:var(--cut);mask-image:var(--cut)} :is(#scene-1, #scene-6) .store{flex:1 1 0;min-width:0;justify-content:center;padding:8px;min-height:48px} } @media(max-width:759px),(max-aspect-ratio:3/4){ #scene-1 .explore{display:none} } /* Desktop editorial placement: opening lower, natal chart near the top. */ @media(min-width:760px) and (min-aspect-ratio:751/1000){ #scene-1 .copy{top:5vh} #scene-2{align-items:flex-start;padding-top:clamp(120px, 16vh, 180px)} } /* Move only the opening copy; keep its action layout in place. */ @media(min-width:760px) and (min-aspect-ratio:751/1000){ #scene-1 .eyebrow, #scene-1 h1, #scene-1 .description{transform:translateY(-15vh)} } /* Tighter spacing between the supplied logo and wordmark. */ .brand{gap:4px} /* Align the descriptor with the wordmark without moving the logo. */ .brand-copy{position:relative} .brand .audience{position:absolute;top:100%;left:0;margin-top:5px;white-space:nowrap;font-family:var(--sans);font-weight:400} /* Language modal: the one control the site needs before it knows the reader's language. A centred dialog over a blurred page (product owner, 2026-09-22: a modal, not a side drawer). */ .language-backdrop{position:fixed;inset:0;z-index:8;background:rgba(6,8,12,.6);backdrop-filter:blur(18px) saturate(.8);-webkit-backdrop-filter:blur(18px) saturate(.8)} /* `display:flex` below would otherwise beat the UA's `[hidden]{display:none}` (the modal stayed open after a choice, product owner, 2026-09-22). */ .language-modal[hidden],.language-backdrop[hidden]{display:none} .language-modal{position:fixed;z-index:9;top:50%;left:50%;transform:translate(-50%,-50%);width:min(400px,calc(100vw - 32px));max-height:calc(100vh - 32px);padding:24px;background:rgba(11,14,19,.97);border:1px solid #29303a;border-radius:24px;display:flex;flex-direction:column;gap:16px;overflow-y:auto;box-shadow:0 30px 80px rgba(0,0,0,.6);animation:modal-in .3s cubic-bezier(.2,.7,.2,1) both} @keyframes modal-in{from{transform:translate(-50%,-50%) scale(.96);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}} .language-head{display:flex;align-items:center;justify-content:space-between;min-height:44px} .language-head h2{margin:0;font-family:var(--serif);font-size:26px;font-weight:600;letter-spacing:-.6px;color:var(--ink)} .language-close{width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--muted);margin-inline-end:-12px} .language-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round} .language-close:hover{color:var(--ink)} .language-hint{margin:0;font-size:13px;line-height:1.5;color:var(--muted)} .language-list{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column} .language-list button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:0 4px;border-top:1px solid #29303a;color:var(--reading);font-size:18px;text-align:start} .language-list li:last-child button{border-bottom:1px solid #29303a} .language-list button:hover{color:var(--ink)} .language-list button[aria-pressed=true]{color:var(--ink)} .language-list button[aria-pressed=true] .language-code{color:var(--accent)} .language-code{font-size:11px;letter-spacing:.12em;color:var(--muted)} .language-name{font-family:var(--serif);font-size:20px} @media(min-width:760px){.language-modal{padding:32px}.language-name{font-size:22px}} /* Arabic mirrors the page; the chapter rail stays on the right edge, the phone stays where the tall cut composed it. */ [dir=rtl] .copy{text-align:right} [dir=rtl] .brand .audience{left:auto;right:0} /* In RTL the copy sits on the right, so the phone crosses to the left. */ @media(min-width:760px) and (min-aspect-ratio:751/1000){[dir=rtl] .device{right:auto;left:11%}} /* Astrolox for Women's App Store badge before the app is in the store: the same muted "coming soon" treatment as the Google Play badge. */ .apple-soon{color:#c5c8ce} /* ---- Entrance (/) — product owner, 2026-09-23 ------------------------------- One full-screen question over the drifting journey: men or women. The two choices are drawn identically; only the symbol and the words differ. */ .gate-shade{background:linear-gradient(180deg,rgba(6,8,12,.78),rgba(6,8,12,.62) 40%,rgba(6,8,12,.86))} /* The gate loop opens 1.5 s into the journey (gate.js): it fades in over the first-frame poster. */ [data-page=gate] .universe video{transition:opacity 1.6s ease} .gate{position:fixed;inset:0;z-index:2;overflow-y:auto;overflow-x:hidden;display:flex;scrollbar-width:none} .gate::-webkit-scrollbar{display:none} .gate-inner{margin:auto;width:100%;max-width:920px;padding:108px 20px max(24px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;text-align:center;text-shadow:0 2px 28px #000,0 1px 7px #0008} .gate .eyebrow{justify-content:center;margin-bottom:16px} .gate h1{font-size:clamp(36px,9.2vw,68px);margin:0 0 16px} .gate-lead{font-size:16px;line-height:1.6;color:var(--reading);max-width:560px;margin:0;text-wrap:pretty} .gate-choices{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;max-width:640px;margin:28px 0 0} .gate-choice{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 14px 20px;border:1px solid #f2efe833;border-radius:20px;background:rgba(9,11,14,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-shadow:none;transition:border-color .25s,background .25s,transform .25s} .gate-symbol{width:56px;height:56px;margin-bottom:8px;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke .25s} .gate-label{font-family:var(--serif);font-size:23px;font-weight:500;letter-spacing:-.4px;color:var(--ink)} .gate-name{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .gate-note{font-size:14px;line-height:1.5;color:var(--reading);margin-top:6px;max-width:250px;text-wrap:pretty} .gate-go{margin-top:10px;font-size:18px;color:var(--muted);transition:color .25s,transform .25s} /* Each choice is highlighted in its app's audience accent (product owner, 2026-09-23): the men's blue (`accentMetalText`) and the women's wine (`accentAudienceWomen`, dark appearance), from Assets.xcassets. */ .gate-choice[data-choice=men]{--choice:#6194e6} .gate-choice[data-choice=women]{--choice:#c7476b} .gate-choice:hover{border-color:var(--choice);background:rgba(16,20,27,.78)} .gate-choice:hover .gate-symbol,.gate-choice:focus-visible .gate-symbol{stroke:var(--choice)} .gate-choice:hover .gate-go{color:var(--ink);transform:translateX(4px)} [dir=rtl] .gate-go{transform:scaleX(-1)} [dir=rtl] .gate-choice:hover .gate-go{transform:scaleX(-1) translateX(4px)} .gate-choice:focus-visible{outline:2px solid var(--choice);outline-offset:4px} .gate-reasons{list-style:none;margin:32px 0 0;padding:0;width:100%;max-width:880px;display:grid;grid-template-columns:1fr;gap:14px;text-align:start} .gate-reasons li{display:flex;flex-direction:column;gap:4px;padding-top:14px;border-top:1px solid #f2efe826} .gate-reasons strong{font-family:var(--serif);font-size:18px;font-weight:500;color:var(--ink)} .gate-reasons span{font-size:14px;line-height:1.55;color:var(--reading)} .gate-footer{position:static;display:flex;gap:18px;justify-content:center;margin-top:32px;color:var(--muted);font-size:13px;text-shadow:none} .gate-footer a:hover{color:var(--ink)} /* Studio credit (2026-09-24): its own line under the links, so it never squeezes them. */ .gate-footer{flex-wrap:wrap;row-gap:8px}.gate-footer .credit{flex-basis:100%;text-align:center} @media(max-width:380px){.gate-choice{padding:18px 10px 16px}.gate-label{font-size:20px}.gate-symbol{width:46px;height:46px}.gate-note{font-size:13px}} @media(min-width:760px){ .gate-inner{padding:130px 32px 40px} .gate-lead{font-size:19px;line-height:1.65} .gate-choices{gap:20px;margin-top:44px} .gate-choice{padding:34px 24px 28px;border-radius:24px} .gate-choice:hover{transform:translateY(-3px)} .gate-symbol{width:76px;height:76px;margin-bottom:12px} .gate-label{font-size:30px} .gate-note{font-size:15px} .gate-reasons{grid-template-columns:repeat(3,1fr);gap:28px;margin-top:52px} .gate-reasons span{font-size:15px} } @media(min-width:760px) and (max-height:820px){.gate-inner{padding-top:104px}.gate-choices{margin-top:32px}.gate-choice{padding:24px 20px 22px}.gate-symbol{width:60px;height:60px}.gate-reasons{margin-top:36px}} /* Panel 6 on a phone: the closing paragraph is the page's longest and ran under the store badges (product owner, 2026-09-23: "butonları biraz daha aşağı al"). Here the phone shows its lower half and fades in below the 50dvh line, so the badges sit just under that line instead of above it. */ @media(max-width:759px),(max-aspect-ratio:3/4){ body[data-panel="6"] #scene-6 .stores{transform:translateY(28px)} /* The badges now overlap the phone's faded top edge; they draw above it. */ body[data-panel="6"] #story{z-index:4} } .story-panel{min-height:100%;position:relative;z-index:4;scroll-snap-align:start;display:flex;align-items:center;padding:104px 24px 72px;background:#0b0e13}.story-copy{width:100%;position:relative;z-index:1}.story-nebula{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity 1.2s;-webkit-mask-image:linear-gradient(transparent,#000 180px);mask-image:linear-gradient(transparent,#000 180px)}.story-nebula.ready{opacity:1}.story-nebula.fixed{position:fixed;z-index:0;-webkit-mask-image:none;mask-image:none}#our-story::before{content:'';position:absolute;left:0;right:0;bottom:100%;height:160px;pointer-events:none;background:linear-gradient(#0b0e1300,#0b0e13);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-mask-image:linear-gradient(transparent,#000);mask-image:linear-gradient(transparent,#000)}.story-grid{display:grid;gap:30px}.story-part h3{font-family:var(--serif);font-size:25px;font-weight:500;line-height:1.2;letter-spacing:-.3px;margin:0 0 10px;text-wrap:balance}.story-text{font-size:16px;line-height:1.65;margin:0;color:var(--reading);text-wrap:pretty}.device,.bottom-bar{transition:opacity .35s}body[data-story=on] .device,body[data-story=on] .bottom-bar{opacity:0;pointer-events:none}header{transition:background .35s}body[data-story=on] header{background:linear-gradient(#0b0e13 72%,#0b0e1300)}@media(min-width:760px){.story-panel{padding:110px 7.8% 90px}.story-grid{grid-template-columns:repeat(6,1fr);gap:44px 48px}.story-part{grid-column:span 2}.story-part:nth-child(4){grid-column:2 / span 2}.story-part h3{font-size:clamp(24px,2vw,32px)}.story-text{font-size:clamp(16px,1.1vw,18px)}} /* Studio credit on a phone (2026-09-24): a second footer line, so the legal links keep their width; the bottom bar on the last panel sits one line higher to clear it. */ @media(max-width:759px),(max-aspect-ratio:3/4){footer:not(.gate-footer){flex-wrap:wrap;right:24px;row-gap:10px}footer:not(.gate-footer) .credit{flex-basis:100%}body[data-panel="6"] .bottom-bar{bottom:calc(max(24px,env(safe-area-inset-bottom)) + 60px)}} @media(max-width:759px) and (max-height:740px){body[data-panel="6"] .bottom-bar{bottom:calc(max(16px,env(safe-area-inset-bottom)) + 50px)}} /* Panel 6 phone cut (product owner, 2026-09-26: "gradient kesme olmamış"). The 54 px fade sat entirely under the store badges (50dvh+28 ... +76 px), so the phone read as hard-edged. The fade now starts under the badges and ends below them (50dvh+56 ... +140 px, eased), above the notification. Short phones keep the old stops: their notification sits right under the badges. */ @media(max-width:759px) and (max-height:740px){ body[data-panel="6"] .device{--cut:linear-gradient(to bottom, transparent calc(100% - 50dvh + 96px), #000 calc(100% - 50dvh + 150px))} } /* "Bize ulaşın" (product owner, 2026-09-26: "çok zayıf duruyor"): the one footer link a reader acts on is drawn in ink, medium weight, underlined. */ footer a[data-legal=support]{color:var(--ink);font-weight:500;text-decoration:underline;text-decoration-color:#f2efe880;text-decoration-thickness:1px;text-underline-offset:3px} footer a[data-legal=support]:hover{text-decoration-color:currentColor} /* Type scale +1 px (product owner, 2026-09-26: "fontları biraz daha büyütelim"). Panel 6's closing paragraph is the page's longest; on a 375 px-wide tall phone the larger size put ru/es/pt flush against the store badges (gap 0), so there alone it keeps the previous 16 px (gap 11-62 px, six languages). */ @media(max-width:389px) and (min-height:741px){#scene-6 .description{font-size:16px}} /* The app film over the still screen (2026-09-29); shown once it plays. */ .display .phone-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .25s}.display .phone-film.ready{opacity:1} /* Phone: two screens per chapter (owner, 2026-09-29: "metin düğmeler için gerekirse ek paneller"). The words and buttons stand alone; the next screen shows the phone whole, aligned to its own top, instead of the upper half cut at 50dvh. */ .phone-step{display:none} @media(max-width:759px),(max-aspect-ratio:3/4){ .phone-step{display:block;height:100%;min-height:570px;scroll-snap-align:start;scroll-snap-stop:normal} /* The whole phone, between the header and the bottom edge (owner, 2026-09-30, superseding the same day's "bottom edge just past the screen": in iOS Safari the cut ran under the toolbar and the frame read as too narrow or too long). Height is the space under the header, or what 92% of the width allows; the width is written out from it, not left to aspect-ratio. */ html body[data-step] .device{--ph:min(calc(100dvh - max(76px,10dvh) - max(16px,env(safe-area-inset-bottom))),calc(92vw * 3068 / 1520));top:auto;bottom:max(16px,env(safe-area-inset-bottom));left:50%;right:auto;height:var(--ph);width:calc(var(--ph) * 1520 / 3068);max-width:none;max-height:none;clip-path:none;-webkit-mask-image:none;mask-image:none;transition:opacity .45s,transform .45s} /* Until the first scroll update names the step, the phone is not there at all: it used to show at the old spot and slide away on load (owner, 2026-09-30). */ body:not([data-step]) .device{opacity:0;transition:none} html body[data-step=text] .device{opacity:0;transform:translate(-50%,28px)} html body[data-step=phone] .device{opacity:1;transform:translate(-50%,0)} html body[data-step] :is(#scene-1,#scene-6) .stores{position:static;display:flex;transform:none;left:auto;top:auto;width:100%;margin-top:22px} /* Not in the story: its last screen brings the legal links back (owner, 2026-09-30: they were missing). */ body[data-step=phone]:not([data-story]) footer{display:none} } /* The words have their own screen now (owner, 2026-09-30): larger type. */ @media(max-width:759px),(max-aspect-ratio:3/4){ .panel h1,.panel h2{font-size:clamp(44px,12vw,62px);margin-bottom:22px} .panel .eyebrow{font-size:12px;margin-bottom:24px} .panel .description{font-size:19px;line-height:1.6;max-width:none} .panel .detail{font-size:13px;margin-top:26px} .panel .store,html body :is(#scene-1,#scene-6) .store{min-height:54px} .panel .store strong{font-size:18px} } @media(max-width:759px) and (max-height:740px){ .panel h1,.panel h2{font-size:clamp(40px,11vw,54px);margin-bottom:16px} .panel .eyebrow{margin-bottom:18px} .panel .description{font-size:17px} .panel .detail{margin-top:18px} .panel .store,html body :is(#scene-1,#scene-6) .store{min-height:52px} } /* The words gather at the bottom of their screen (owner, 2026-09-30), above the bottom bar; on the last chapter also above the legal links. */ @media(max-width:759px),(max-aspect-ratio:3/4){ .panel{align-items:flex-end;padding-bottom:calc(max(24px,env(safe-area-inset-bottom)) + 70px)} #scene-6.panel{padding-bottom:calc(max(24px,env(safe-area-inset-bottom)) + 130px)} } /* The phone sits UNDER the scroller (owner, 2026-09-30). Above it, iOS Safari gave the touch to the film