/* Entry hub only. The catalogue and existing day/night skin stay unchanged. */
/* Use the actual Telegram webview height (or the browser's dynamic viewport).
   Header and legal links reserve their own space; only the stage flexes. */
body:has(main[data-page="home"]) { height:var(--tg-viewport-height,100dvh); overflow:hidden; }
.app-shell:has(main[data-page="home"]) { display:flex; flex-direction:column; height:var(--tg-viewport-height,100dvh); min-height:0; }
.app-shell:has(main[data-page="home"]) > .app-header { flex:none; }
main[data-page="home"] { flex:1; min-height:0; padding:12px 22px calc(6px + var(--safe-bottom)); }
.home-hub { display:flex; flex-direction:column; height:100%; min-height:0; }
.home-heading { flex:none; text-align:center; position:relative; z-index:1; }
.home-heading .eyebrow { margin-bottom:8px; }
.home-heading h1 { font-size:clamp(23px,6.7vw,32px); line-height:1.16; margin-bottom:0; white-space:nowrap; overflow-wrap:normal; }
.home-carousel { display:flex; flex-direction:column; flex:1; min-height:0; margin:0 -22px; }
/* Clip without creating a scroll container: focusing a side card must never
   move the perspective plane. Hidden remains a fallback for older WebViews. */
.home-stage { position:relative; flex:1; min-height:0; overflow:hidden; overflow:clip; touch-action:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
/* The transparent perspective plane must not intercept the inner portions of
   rotated cards that lie behind z=0. Only actual card surfaces receive input. */
.home-ring { position:absolute; inset:0; perspective:530px; perspective-origin:50% calc(100% + 150px); transform-style:preserve-3d; pointer-events:none; }
.home-card { position:absolute; left:50%; top:calc(50% + 12px); height:min(354px,calc(100% - 72px)); width:auto; aspect-ratio:9 / 16; translate:-50% -50%; margin:0; border:0; padding:0; text-align:left; border-radius:20px; overflow:hidden; background:linear-gradient(150deg,#8d7566,#302a25); color:#fff; box-shadow:0 12px 26px #32201320; backface-visibility:hidden; will-change:transform; isolation:isolate; -webkit-user-select:none; user-select:none; pointer-events:auto; }
.home-card > span { pointer-events:none; }
.home-card::after { content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px #ffffff30; pointer-events:none; }
.home-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.home-card-shade { position:absolute; inset:0; background:linear-gradient(180deg,#070b0c30,transparent 28%,#070b0c08 43%,#070b0cdb 100%); pointer-events:none; }
.home-card-top { position:absolute; left:16px; right:16px; top:16px; display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:11px; letter-spacing:.08em; }
.home-soon { padding:4px 8px; background:#10100f66; border:1px solid #ffffff3a; border-radius:20px; font-size:9px; letter-spacing:.04em; }
.home-card-copy { position:absolute; left:16px; right:16px; bottom:17px; display:block; }
.home-card-kind { display:block; font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:#ffffffe0; margin-bottom:7px; }
.home-card-title { display:block; font-weight:500; font-size:23px; line-height:1.12; letter-spacing:-.045em; overflow-wrap:normal; }
.home-card-arrow { display:grid; place-items:center; margin-top:14px; border:1px solid #ffffff66; border-radius:50%; width:30px; height:30px; }
.home-card-arrow svg { width:17px; height:17px; transform:rotate(-35deg); }
.home-card:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.home-controls { display:flex; flex:none; align-items:center; justify-content:center; gap:4px; padding:0 12px; }
.home-control,.home-dot { min-width:44px; height:44px; border:0; padding:0; display:grid; place-items:center; background:transparent; color:var(--ink); border-radius:50%; }
.home-control svg { width:18px; height:18px; }
.home-previous svg { transform:rotate(180deg); }
.home-dots { display:flex; align-items:center; }
.home-dot { min-width:27px; }
.home-dot span { width:5px; height:5px; border-radius:10px; background:var(--muted); opacity:.4; transition:width 220ms ease,opacity 220ms ease; }
.home-dot[aria-pressed="true"] span { width:18px; background:var(--accent); opacity:1; }
.home-footer { flex:none; margin-top:8px; padding:0; }
.home-footer .legal-links { min-height:44px; }
.home-footer .legal-links a { display:inline-flex; align-items:center; min-height:44px; }
.home-back-arrow { display:inline-flex; transform:rotate(180deg); }
.home-back-arrow svg { width:16px; height:16px; }
.home-scene { text-align:center; padding:70px 0 40px; }
.home-scene .eyebrow { margin-bottom:18px; }
.home-scene h1 { font-size:36px; }
.home-scene-mark { display:grid; place-items:center; width:86px; height:86px; margin:36px auto 24px; border:1px solid var(--line); border-radius:50%; color:var(--accent); font-size:36px; }
.home-scene p { color:var(--muted); font-size:13px; line-height:1.7; }
:root[data-theme="dark"] .home-card { box-shadow:0 15px 34px #0005; }
@media(hover:hover) { .home-control:hover,.home-dot:hover { background:var(--accent-soft); } }
@media(max-width:359px) { .home-controls { gap:0; } .home-card-title { font-size:21px; } }
@media(max-height:620px) {
  main[data-page="home"] { padding-top:6px; }
  .home-heading .eyebrow { margin-bottom:4px; }
  .home-footer { margin-top:2px; }
  .home-card { height:min(354px,calc(100% - 58px)); top:calc(50% + 7px); }
  .home-card-top { top:12px; left:12px; right:12px; }
  .home-card-copy { left:12px; right:12px; bottom:13px; }
  .home-card-arrow { margin-top:8px; }
}
@media(prefers-reduced-motion:reduce) { .home-card { will-change:auto; } .home-dot span { transition:none; } }

/* The selected card lives in the native top layer, outside the ring perspective.
   Its image keeps the original proportions; only the backdrop is blurred. */
body:has(.home-preview[open]) { overflow:hidden; }
.home-preview { width:min(300px,calc(100vw - 84px),calc((var(--tg-viewport-height,100dvh) - 140px - var(--safe-top) - var(--safe-bottom)) * .5625)); aspect-ratio:9 / 16; max-width:none; max-height:none; height:auto; top:calc(82px + var(--safe-top)); bottom:calc(20px + var(--safe-bottom)); padding:0; border:0; margin:auto; background:transparent; color:#fff; overflow:visible; }
.home-preview::backdrop { top:calc(70px + var(--safe-top)); background:#12150f52; -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); animation:home-focus-backdrop 350ms ease-out both; }
.home-preview[data-returning="true"]::backdrop { animation:home-return-backdrop 600ms cubic-bezier(.4,0,.2,1) both; }
.home-preview-frame { position:relative; width:100%; height:100%; transform-origin:center; }
.home-preview-card { position:relative; display:block; width:100%; height:100%; aspect-ratio:9 / 16; border-radius:23px; overflow:hidden; color:#fff; background:#171917; box-shadow:0 24px 70px #0005; }
.home-preview-art { position:absolute; inset:0; display:block; overflow:hidden; }
.home-preview-image { width:100%; height:100%; object-fit:cover; }
.home-preview-copy { position:absolute; inset:auto 0 0; display:block; max-height:100%; overflow-y:auto; overscroll-behavior:contain; padding:60px 20px 21px; background:linear-gradient(180deg,transparent,#080c10a8 26%,#080c10e6 100%); }
.home-preview-kind { display:block; margin-bottom:7px; color:#ffffffbd; font-size:9px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; }
.home-preview-copy h2 { font-size:27px; font-weight:500; letter-spacing:-.045em; line-height:1.08; margin:0 0 10px; }
.home-preview-description { display:block; font-size:12px; line-height:1.5; color:#ffffffe0; }
.home-preview-enter { display:flex; align-items:center; justify-content:space-between; gap:14px; padding-top:13px; margin-top:15px; border-top:1px solid #ffffff40; color:#fff; font-size:12px; font-weight:500; }
.home-preview-enter svg { width:20px; height:20px; }
.home-preview-close { position:absolute; right:6px; top:6px; width:44px; height:44px; display:grid; place-items:center; border:0; border-radius:50%; padding:0; color:#fff; background:transparent; }
.home-preview-close::before { content:""; position:absolute; inset:7px; border-radius:50%; background:#15191350; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:background-color 180ms ease; }
.home-preview-close svg { position:relative; width:15px; height:15px; stroke-width:1.25; }
.home-preview-close:focus-visible { outline:1px solid #ffffffba; outline-offset:-6px; }
@media(hover:hover) { .home-preview-close:hover::before { background:#15191390; } }
.home-preview-card:focus-visible { outline-offset:4px; }
@keyframes home-focus-backdrop { from { background-color:#12150f00; } to { background-color:#12150f52; } }
@keyframes home-return-backdrop { from { background-color:#12150f52; -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); } to { background-color:transparent; -webkit-backdrop-filter:blur(0); backdrop-filter:blur(0); } }
@media(prefers-reduced-motion:reduce) { .home-preview::backdrop,.home-preview[data-returning="true"]::backdrop { animation:none; } .home-preview-close::before { transition:none; } }
@media(max-width:359px),(max-height:680px) { .home-preview-copy { padding:46px 16px 17px; } .home-preview-copy h2 { font-size:24px; margin-bottom:8px; } .home-preview-description { font-size:11px; } .home-preview-enter { margin-top:12px; padding-top:11px; } }
@media(max-height:480px) { .home-preview { width:min(240px,calc(100vw - 84px)); height:calc(100dvh - 112px); aspect-ratio:auto; overflow:auto; overscroll-behavior:contain; border-radius:23px; } .home-preview-frame { height:auto; } .home-preview-card { height:auto; } }