/* v9 layer (owner's ask of 2026-10-12): logo through the tear, fluorescent lamp, design A store,
   16 games, OS band. Loaded last on the home page; colours from the GamerKhaan logo. */
:root {
  --gk-black:#060608; --gk-card:#0e0e13; --gk-line:rgba(255,255,255,.08); --gk-line-2:rgba(255,255,255,.14);
  --gk-text:#F4F4F6; --gk-muted:#9A9AA6; --gk-red:#EB3337;
  --gk-y:#FBE335; --gk-o:#D28E63; --gk-p:#F05666; --gk-v:#A83991;
  --gk-grad:linear-gradient(90deg,var(--gk-y) 0%,var(--gk-o) 24.7%,var(--gk-p) 38%,var(--gk-v) 100%);
  --gk-tube:#EAF8FF; --gk-tube-glow:#8FF3FF; --gk-ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- intro: the logo comes forward through the torn paper ---------- */
.tear-section, .tear-stage, .reveal-underlay { background:var(--gk-black); }
.logo-ground { position:absolute; left:50%; top:63%; width:min(78vw,980px); height:160px; transform:translate(-50%,-50%) scale(calc(.55 + .45 * var(--logo-land,0))); background:radial-gradient(closest-side, rgba(240,86,102,.34), rgba(168,57,145,.14) 55%, transparent); opacity:var(--logo-land,0); pointer-events:none; }
.logo-stage { position:absolute; inset:0 0 14%; display:grid; place-items:center; pointer-events:none; z-index:1; }
.logo-rig { width:min(72vw,940px); height:auto; overflow:visible; opacity:0; transform-origin:50% 62%; will-change:transform,opacity; }
.logo-rig #gk-tagline { clip-path:inset(0 100% 0 0); transition:clip-path .01s; }
.logo-rig #gk-tagline.typed { clip-path:inset(0 0 0 0); transition:clip-path .95s steps(26,end) .75s; }
.logo-shock { position:absolute; left:50%; top:50%; width:44vmin; height:44vmin; margin:-22vmin 0 0 -22vmin; border-radius:50%; border:2px solid rgba(251,227,53,.75); box-shadow:0 0 50px rgba(240,86,102,.55), inset 0 0 50px rgba(240,86,102,.35); opacity:0; pointer-events:none; }
.logo-stage.impact .logo-shock { animation:gk-shock .75s var(--gk-ease) both; }
.logo-stage.impact { animation:gk-shake .34s linear both; }
@keyframes gk-shock { from { transform:scale(.25); opacity:.95; } to { transform:scale(2.7); opacity:0; } }
@keyframes gk-shake { 12% { transform:translate(-6px,3px); } 26% { transform:translate(5px,-3px); } 42% { transform:translate(-4px,2px); } 58% { transform:translate(3px,-2px); } 74% { transform:translate(-1px,1px); } 100% { transform:none; } }
.reveal-copy p { color:var(--gk-muted); font-size:14px; margin:0 0 16px; }
.reveal-ctas { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; align-items:center; }
.reveal-renew, .os-renew { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 18px; border-radius:999px; border:1px solid var(--gk-line-2); color:var(--gk-text); font-size:13px; transition:background-color .2s, border-color .2s; }
.reveal-renew:hover, .os-renew:hover { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.3); }
.os-renew .lucide { width:15px; height:15px; }
/* the white entry page says only GAMERKHAAN: the scroll cue is a thin line, no words */
.tear-section .scroll-hint { font-size:0; color:transparent; }
.tear-section .scroll-hint span { width:1px; height:46px; margin:0 auto; font-size:0; background:linear-gradient(rgba(22,22,27,0), rgba(22,22,27,.5)); transform-origin:top; animation:gk-cue 2.4s var(--gk-ease) infinite; }
.tear-section .scroll-hint span .lucide { display:none; }
@keyframes gk-cue { 0% { transform:scaleY(0); opacity:1; } 60% { transform:scaleY(1); opacity:1; } 100% { transform:scaleY(1); opacity:0; } }

/* ---------- lamp: opens from the centre, flickers on, lights the modem ---------- */
.lamp-section, #lamp-section { --lamp-background:var(--gk-black); --lamp-open:0; background:var(--gk-black); }
.lamp-line { width:min(76%,1100px); height:3px; transform:translateX(-50%) scaleX(var(--lamp-open)); background:linear-gradient(90deg,rgba(143,243,255,0),#c9faff 9%,#fff 50%,#c9faff 91%,rgba(143,243,255,0)); opacity:.32; box-shadow:0 0 8px rgba(143,243,255,.6); border-radius:3px; }
.lamp-halo { width:min(76%,1100px); transform:translate(-50%,-50%) scaleX(var(--lamp-open)); background:var(--gk-tube-glow); opacity:.05; }
.lamp-beam { width:min(38%,560px); max-width:none; opacity:.04; transform:scaleX(var(--lamp-open)); }
.lamp-beam.left { transform-origin:right center; background:conic-gradient(from 70deg at center top, #bdf7ff, transparent, transparent); }
.lamp-beam.right { transform-origin:left center; background:conic-gradient(from 290deg at center top, transparent, transparent, #bdf7ff); }
.lamp-spark { position:absolute; left:50%; top:var(--lamp-level); z-index:2; width:7px; height:7px; margin:-3.5px 0 0 -3.5px; border-radius:50%; background:#fff; box-shadow:0 0 12px 4px rgba(143,243,255,.85), 0 0 34px 10px rgba(143,243,255,.35); opacity:calc(min(1, var(--lamp-progress) * 60) * (1 - min(1, var(--lamp-open) * 3))); }
#lamp-section[data-power="on"] .lamp-line { opacity:1; animation:gk-flick .8s steps(1,end) both; }
#lamp-section[data-power="on"] .lamp-halo { opacity:.42; animation:gk-flick .8s steps(1,end) both; }
#lamp-section[data-power="on"] .lamp-beam { opacity:.62; animation:gk-flick .8s steps(1,end) both; }
/* two quick flicks, then steady: at most 3 flashes in any second (WCAG 2.3.1) */
@keyframes gk-flick { 0% { opacity:.08; } 12% { opacity:1; } 22% { opacity:.1; } 36% { opacity:1; } 46% { opacity:.35; } 58%, 100% { opacity:1; } }
.lamp-stage .lamp-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,40%) minmax(0,1fr); grid-template-areas:"head device steps"; align-items:center; gap:3%; }
.lamp-copy { display:contents; }
.lamp-head { grid-area:head; padding:0; opacity:0; transform:translateY(14px); transition:opacity .6s var(--gk-ease) .35s, transform .7s var(--gk-ease) .35s; }
#lamp-section[data-power="on"] .lamp-head { opacity:1; transform:none; }
.lamp-kicker { display:inline-block; font-size:12px; letter-spacing:.02em; color:#bdf7ff; margin-bottom:12px; }
.lamp-head h2 { margin-bottom:18px; }
.lamp-head h2 span { color:#bdf7ff; }
.lamp-head > p { margin-bottom:22px; color:var(--gk-muted); }
.lamp-device { grid-area:device; }
.lamp-steps { grid-area:steps; list-style:none; margin:0; padding:0; display:grid; gap:12px; counter-reset:lamp; }
.lamp-steps li { position:relative; padding:14px 16px 14px 14px; border-radius:14px; border:1px solid var(--gk-line); background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01)); opacity:0; transform:translateY(22px); transition:opacity .55s var(--gk-ease), transform .65s var(--gk-ease), border-color .4s; }
.lamp-steps b { display:block; font-size:15px; font-weight:700; color:var(--gk-text); margin-bottom:4px; }
.lamp-steps span { display:block; font-size:13px; line-height:1.9; color:var(--gk-muted); }
#lamp-section[data-step="1"] .lamp-steps li:nth-child(-n+1),
#lamp-section[data-step="2"] .lamp-steps li:nth-child(-n+2),
#lamp-section[data-step="3"] .lamp-steps li { opacity:.55; transform:none; }
#lamp-section[data-step="1"] .lamp-steps li:nth-child(1),
#lamp-section[data-step="2"] .lamp-steps li:nth-child(2),
#lamp-section[data-step="3"] .lamp-steps li:nth-child(3) { opacity:1; border-color:rgba(189,247,255,.28); }
/* the modem sits in the dark until the tube is on, then the light falls on it */
#lamp-section .huawei-stage { filter:brightness(.3) saturate(.55); transition:filter .6s; }
#lamp-section[data-power="on"] .huawei-stage { filter:brightness(1.06) saturate(1); animation:gk-flick-device .8s steps(1,end) both; }
@keyframes gk-flick-device { 0% { filter:brightness(.3) saturate(.55); } 12% { filter:brightness(1.06); } 22% { filter:brightness(.34) saturate(.6); } 36% { filter:brightness(1.06); } 46% { filter:brightness(.55); } 58%, 100% { filter:brightness(1.06) saturate(1); } }
.lamp-device::before { content:""; position:absolute; inset:-30% -12% 0; z-index:1; pointer-events:none; background:radial-gradient(48% 70% at 50% 0%, rgba(201,250,255,.2), rgba(143,243,255,.05) 55%, transparent 75%); opacity:0; transition:opacity .4s; }
#lamp-section[data-power="on"] .lamp-device::before { opacity:1; animation:gk-flick .8s steps(1,end) both; }
#lamp-section .huawei-ground { --led:#bdf7ff; opacity:.12; left:24%; right:24%; height:16px; filter:blur(14px); transition:opacity .5s; }
#lamp-section[data-power="on"] .huawei-ground { opacity:.75; }
@media (max-width:1020px) {
  .lamp-stage .lamp-layout { display:grid; grid-template-columns:1fr; grid-template-areas:"device" "head" "steps"; gap:12px; padding-top:92px; }
  .lamp-stage .lamp-device { height:clamp(220px,32svh,300px); }
  .lamp-head { text-align:center; }
  .lamp-head h2 { font-size:clamp(28px,5svh,40px); margin-bottom:8px; }
  .lamp-head > p { display:none; }
  .lamp-head .hair-button { display:none; }
  .lamp-kicker { margin-bottom:4px; }
  .lamp-steps { gap:8px; }
  .lamp-steps li { padding:10px 12px; }
  .lamp-steps li span { font-size:12px; line-height:1.8; }
}

/* ---------- games ---------- */
.games-section { background:var(--gk-black); }
.game-logo { width:232px; height:112px; border-color:rgba(255,255,255,.06); }
.game-wordmark { width:160px; height:54px; }
.game-logo.dota-2 .game-wordmark, .game-logo.league-of-legends .game-wordmark, .game-logo.pubg .game-wordmark,
.game-logo.roblox .game-wordmark, .game-logo.gta-online .game-wordmark, .game-logo.world-of-warcraft .game-wordmark,
.game-logo.apex-legends .game-wordmark, .game-logo.ea-sports-fc .game-wordmark { width:120px; height:66px; }
.games-tm { margin-top:26px; font-size:11px; color:var(--gk-muted); text-align:center; opacity:.8; }
@media (max-width:760px) {
  .game-logo { width:168px; height:84px; }
  .game-wordmark { width:118px; height:40px; }
  .game-logo.dota-2 .game-wordmark, .game-logo.league-of-legends .game-wordmark, .game-logo.pubg .game-wordmark,
  .game-logo.roblox .game-wordmark, .game-logo.gta-online .game-wordmark, .game-logo.world-of-warcraft .game-wordmark,
  .game-logo.apex-legends .game-wordmark, .game-logo.ea-sports-fc .game-wordmark { width:90px; height:50px; }
}

/* ---------- store: design A cards with live 3D ---------- */
.products-section { background:var(--gk-black); padding:110px 0 70px; }
.products-section .infinite-grid { opacity:.5; }
.catalog-heading { margin-bottom:22px; }
.catalog-heading h2 { font-size:clamp(28px,3vw,40px); font-weight:800; letter-spacing:-.01em; }
.catalog-heading p { color:var(--gk-muted); max-width:300px; }
.catalog-chips { display:flex; gap:8px; margin-bottom:14px; overflow-x:auto; scrollbar-width:none; padding-block:2px; }
.catalog-chips::-webkit-scrollbar { display:none; }
.catalog-chips button { flex:none; height:36px; padding:0 16px; border-radius:999px; border:1px solid var(--gk-line-2); background:transparent; color:var(--gk-muted); font:500 13px/1 Vazirmatn, sans-serif; cursor:pointer; transition:background-color .2s, color .2s; }
.catalog-chips button:hover { color:var(--gk-text); }
.catalog-chips button.active { background:var(--gk-text); color:#0b0b0e; border-color:transparent; font-weight:700; }
.catalog-trust { display:flex; flex-wrap:wrap; gap:6px 22px; margin-bottom:26px; font-size:12.5px; color:var(--gk-muted); }
.catalog-trust span::before { content:""; display:inline-block; width:6px; height:6px; margin-inline-end:8px; background:var(--gk-grad); vertical-align:middle; }
.product-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.pc.device-tile { position:relative; display:flex; flex-direction:column; aspect-ratio:auto; padding:14px; border-radius:20px; color:var(--gk-text); text-align:right; cursor:default; touch-action:auto;
  background:linear-gradient(180deg,#121217,#0c0c10); border:1px solid var(--gk-line); box-shadow:inset 0 1px 0 rgba(255,255,255,.05); transition:transform .24s var(--gk-ease), border-color .24s; }
.pc.hot { background:linear-gradient(#0f0f14,#0f0f14) padding-box, var(--gk-grad) border-box; border-color:transparent; box-shadow:0 0 44px -14px rgba(240,86,102,.45); }
@media (hover:hover) and (pointer:fine) { .pc.device-tile:hover { transform:translateY(-4px); border-color:var(--gk-line-2); } .pc.hot:hover { border-color:transparent; } }
.pc-stage { position:relative; display:block; width:100%; height:236px; padding:0; border:0; border-radius:14px; background:radial-gradient(60% 55% at 50% 62%, rgba(255,255,255,.05), transparent); cursor:grab; touch-action:pan-y; user-select:none; -webkit-user-select:none; }
.pc-stage[data-dragging=true] { cursor:grabbing; }
.pc-stage:focus-visible { outline:2px solid var(--gk-p); outline-offset:2px; }
.pc .model-slot { position:absolute; inset:0; z-index:1; }
.pc .model-slot > img { inset:8% 14% 16%; width:72%; height:76%; opacity:.92; filter:drop-shadow(0 16px 16px rgba(0,0,0,.6)); }
.pc-pool { position:absolute; left:22%; right:22%; bottom:8%; height:22px; border-radius:50%; background:radial-gradient(closest-side, var(--glow), transparent); filter:blur(7px); opacity:.55; z-index:0; transition:opacity .3s; }
.pc .model-slot[data-model-ready=true] + .pc-pool { opacity:0; }
.pc-badge { position:absolute; top:14px; right:14px; z-index:3; padding:0 9px; border-radius:7px; background:var(--gk-grad); color:#0b0b0e; font:700 11px/22px Vazirmatn, sans-serif; pointer-events:none; }
.pc-cat { margin:12px 0 2px; font-size:12px; color:var(--gk-muted); }
.pc-name { margin:0 0 10px; font-size:16px; font-weight:600; line-height:1.5; }
.pc-specs { list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px; padding:0; }
.pc-specs li { font-size:11px; line-height:20px; padding:0 8px; border:1px solid rgba(255,255,255,.1); border-radius:6px; color:#B9B9C4; }
.pc-buy { margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:8px; padding-top:12px; border-top:1px solid var(--gk-line); }
.pc-price { margin:0; font-size:18px; font-weight:800; font-variant-numeric:tabular-nums; }
.pc-price small { font-size:12px; font-weight:400; color:var(--gk-muted); }
.gk-add { margin:0; }
.pc-add { display:grid; place-items:center; width:40px; height:40px; border-radius:12px; border:1px solid var(--gk-line-2); background:#16161e; color:var(--gk-text); cursor:pointer; transition:transform .2s var(--gk-ease), background-color .2s; }
.pc-add:hover { background:#1e1e28; }
.pc-add:active { transform:scale(.9); }
.pc-add .lucide { width:18px; height:18px; }
.pc.hot .pc-add { background:var(--gk-grad); color:#0b0b0e; border:0; }
.pc-add.done { background:#18a058; color:#fff; border-color:transparent; }
.catalog-note { color:var(--gk-muted); margin-top:28px; }
.home-store-link { color:var(--gk-text); }
@media (max-width:1100px) { .product-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:760px) {
  .products-section { padding:80px 0 50px; }
  .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .pc.device-tile { padding:10px; border-radius:16px; }
  .pc-stage { height:auto; aspect-ratio:1; }
  .pc-badge { top:8px; right:8px; font-size:9.5px; line-height:19px; padding:0 7px; }
  .pc-cat { font-size:11px; margin-top:8px; }
  .pc-name { font-size:14px; margin-bottom:8px; }
  .pc-specs li:nth-child(3) { display:none; }
  .pc-specs li { font-size:10.5px; padding:0 6px; }
  .pc-price { font-size:15px; }
  .pc-price small { font-size:11px; }
  .pc-add { width:36px; height:36px; border-radius:10px; position:relative; }
  .pc-add::after { content:""; position:absolute; inset:-4px; }
}

/* ---------- GamerKhaan OS band ---------- */
.os-band { position:relative; display:grid; grid-template-columns:1.25fr 1fr; gap:28px; align-items:center; margin-block:10px 90px; padding:36px; border-radius:24px; border:1px solid transparent; overflow:hidden;
  background:radial-gradient(60% 120% at 100% 50%, rgba(168,57,145,.22), transparent 70%) padding-box, linear-gradient(#0d0d12,#0d0d12) padding-box, var(--gk-grad) border-box; color:var(--gk-text); }
.os-kicker { font:600 11px/1 Vazirmatn, sans-serif; letter-spacing:.3em; color:var(--gk-y); }
.os-band h2 { margin:12px 0 10px; font-size:clamp(24px,2.6vw,34px); font-weight:800; }
.os-band p { margin:0; max-width:460px; font-size:14px; line-height:2; color:var(--gk-muted); }
.os-ctas { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.os-steps { list-style:none; margin:0; padding:0; display:grid; gap:10px; counter-reset:os; }
.os-steps li { display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:14px; border:1px solid var(--gk-line); background:#0a0a0e; }
.os-steps li::before { counter-increment:os; content:counter(os, persian); flex:none; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--gk-grad); color:#0b0b0e; font-weight:800; }
.os-steps b { display:block; font-size:14px; }
.os-steps span { display:block; font-size:12px; color:var(--gk-muted); }
@media (max-width:760px) { .os-band { grid-template-columns:1fr; padding:22px; margin-bottom:60px; } }

@media (prefers-reduced-motion:reduce) {
  .logo-stage.impact, .logo-stage.impact .logo-shock, .tear-section .scroll-hint span { animation:none; }
  .logo-rig #gk-tagline, .logo-rig #gk-tagline.typed { clip-path:none; transition:none; }
  #lamp-section[data-power="on"] .lamp-line, #lamp-section[data-power="on"] .lamp-halo, #lamp-section[data-power="on"] .lamp-beam,
  #lamp-section[data-power="on"] .huawei-stage, #lamp-section[data-power="on"] .lamp-device::before { animation:none; }
  .lamp-steps li, .lamp-head { transition:none; }
}

/* entry shows only the word: the motion toggle waits until the logo has landed */
body[data-page="home"]:not([data-intro-done="true"]) .motion-toggle { opacity:0; visibility:hidden; }
.motion-toggle { transition:opacity .4s, visibility .4s; }
/* the gap in the paper glows before the logo arrives */
.reveal-underlay::before { content:""; position:absolute; left:50%; top:50%; width:min(90vw,1100px); height:60vh; transform:translate(-50%,-50%) scale(calc(.5 + .5 * var(--tear-open,0))); background:radial-gradient(closest-side, rgba(240,86,102,.28), rgba(168,57,145,.12) 60%, transparent); opacity:var(--tear-open,0); pointer-events:none; }
@media (max-width:760px) {
  .logo-ground { top:54%; width:92vw; height:110px; }
  .logo-rig { width:90vw; }
  .pc-buy { gap:4px; }
  .pc-price { font-size:14px; white-space:nowrap; }
  .pc-price small { font-size:10px; }
}
/* games rows are JS belts (app.js): no CSS marquee, never paused by hover; press to hold, drag to fling */
.game-track, .game-track.reverse { animation:none !important; will-change:transform; cursor:grab; touch-action:pan-y; user-select:none; -webkit-user-select:none; }
.game-track.grabbing { cursor:grabbing; }
/* lamp: GamerKhaan OS card beside the Google router; lights up with the lamp */
.lamp-os { position:absolute; z-index:3; right:-6%; bottom:8%; width:min(46%,210px); padding:14px 16px 12px; border-radius:16px; direction:rtl; color:#fff; background:linear-gradient(160deg,rgba(22,26,38,.94),rgba(8,10,16,.94)); border:1px solid rgba(240,86,102,.5); box-shadow:inset 0 0 0 1px rgba(255,255,255,.04), 0 18px 50px rgba(240,86,102,.2); opacity:.2; transform:translateY(10px); transition:opacity .6s, transform .6s; pointer-events:none; }
#lamp-section[data-power="on"] .lamp-os { opacity:1; transform:none; }
.lamp-os b { display:block; direction:ltr; text-align:left; font:400 19px/1.05 Anton, Vazirmatn, sans-serif; letter-spacing:.04em; background:var(--gk-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lamp-os span { display:block; margin-top:6px; font-size:12.5px; color:rgba(255,255,255,.74); }
.lamp-os em { display:flex; gap:5px; margin-top:10px; direction:ltr; }
.lamp-os em i { width:7px; height:7px; border-radius:50%; background:#5EEAD4; box-shadow:0 0 8px #5EEAD4; }
.lamp-os em i:nth-child(2) { background:#FBE335; box-shadow:0 0 8px #FBE335; } .lamp-os em i:nth-child(3) { background:#F05666; box-shadow:0 0 8px #F05666; }
@media (max-width:760px) { .lamp-os { right:2%; bottom:2%; width:min(52%,180px); padding:10px 12px; } .lamp-os b { font-size:15px; } }
/* out of stock price on the store cards */
.pc-price.out bdi { color:rgba(255,255,255,.62); font-weight:700; }
/* trust seals (eNamad, ZarinPal) at the very end of the home page */
.site-seals { display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; padding:22px 16px 30px; background:var(--gk-black,#070b14); }
.site-seals img { display:block; max-height:110px; width:auto; background:#fff; border-radius:12px; padding:6px; }
#zarinpal img { width:80px; height:auto; }
#lamp-title span { white-space:nowrap; font-size:.62em; }