/* ==========================================================================
   Openworld -- the moving parts: the scroll-driven scenes (the caves, the
   solar system, the jump), titles word by word, cards lit by the pointer,
   the marquee, the builder, the creatures on the download cards, the access
   code, and the install guide with its (drawn) system windows.
   ========================================================================== */

/* ---- the scroll-driven scenes: caves, the sky, the jump ---------------------- */
.scroll-scene { position: relative; height: 340vh; background: var(--bg); }
.planet-intro { height: 440vh; }
.sky-scene { height: 480vh; }
.scene-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.scene-canvas { position: absolute; inset: 0; }
.cave-scene .scene-sticky { background: radial-gradient(ellipse at 50% 70%, #1a1310, #07090f 70%); }
.sky-scene .scene-sticky { background: linear-gradient(180deg, #0c1a3c 0%, #274f8f 34%, #6f8fc4 58%, #f0b37e 82%, #f38a5a 100%); }
.planet-sticky {
  background:
    radial-gradient(1.5px 1.5px at 8% 20%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 22% 70%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 38% 14%, #dfe8ff 50%, transparent 51%), radial-gradient(1px 1px at 57% 42%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 76% 24%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 92% 62%, #cfe0ff 50%, transparent 51%),
    radial-gradient(1px 1px at 14% 88%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 48% 84%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 68% 90%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 84% 8%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 31% 48%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 62% 12%, #fff 50%, transparent 51%),
    linear-gradient(180deg, #03050b, #060a16 50%, #03050b);
}
.scene-lines { position: absolute; inset: 0; z-index: 3; display: grid; place-items: start center; padding: 11vh var(--gutter) 0; pointer-events: none; text-align: center; }
.pl {
  grid-area: 1 / 1; max-width: 15em; opacity: 0; will-change: transform, opacity;
  padding: 0.28em 0.6em 0.36em; border-radius: 22px;
  background: rgba(6, 10, 22, 0.62); border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  font: 800 clamp(1.9rem, 4.8vw, 4.2rem)/1.05 var(--display); color: #fff;
}
.pl .kicker { font-size: clamp(0.72rem, 1.1vw, 0.86rem); margin-bottom: 4px; }
.pl small { display: block; margin: 12px auto 0; max-width: 30em; font: 700 clamp(0.95rem, 1.5vw, 1.15rem)/1.5 var(--display); color: #d6def0; }
.sun-glow {
  position: absolute; left: 0; top: 0; z-index: 1; width: 10px; height: 10px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(255, 240, 190, 0.6) 0%, rgba(255, 200, 90, 0.3) 22%, rgba(255, 150, 50, 0.1) 45%, transparent 68%);
  mix-blend-mode: screen;
}
.astre-tag {
  position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; white-space: nowrap; opacity: 0; transition: opacity 0.3s;
  padding: 3px 10px; border-radius: 99px; font: 800 0.82rem var(--display); letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff; background: rgba(6, 10, 22, 0.7); border: 1px solid rgba(255, 255, 255, 0.16);
}
.astre-tag.on { opacity: 1; }

/* ---- titles, word by word -------------------------------------------------- */
.split .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.split .w > span { display: inline-block; transform: translateY(110%) rotate(5deg); transform-origin: 0 100%; transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); transition-delay: calc(var(--wi, 0) * 65ms + 100ms); }
.in .split .w > span, .split.in .w > span { transform: none; }

/* ---- the story's frame ------------------------------------------------------- */
.frame-corner { z-index: 2; }
.frame-count { position: absolute; left: 18px; bottom: 16px; z-index: 2; font: 800 0.9rem var(--display); color: var(--muted); background: rgba(10, 15, 28, 0.65); padding: 5px 11px; border-radius: 9px; }
.frame-count b { color: #fff; }

/* ---- cards: lit by the pointer, leaning toward it ---------------------------- */
.card, .platform { transform-style: preserve-3d; }
.card.in, .platform.in { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px)); }
.card:hover { --lift: -6px; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift)); }
.card > *, .platform > * { position: relative; }
.card::before, .platform::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.3s;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent, var(--grass)) 24%, transparent), transparent 62%);
}
.card:hover::before, .platform:hover::before { opacity: 1; }
.platform .yours { position: absolute; }

/* ---- the marquee of creature names ------------------------------------------- */
.marquee { position: relative; overflow: hidden; padding: 22px 0; margin: 10px 0; background: #0c1426; border-block: 1px solid var(--line); transform: skewY(-2.2deg); }
.marquee-track { display: flex; align-items: center; gap: 34px; width: max-content; animation: marquee 55s linear infinite; }
.marquee-track span { display: inline-block; white-space: nowrap; font: 800 clamp(2rem, 6vw, 4.4rem)/1 var(--display); text-transform: uppercase; color: #fff; transform: skewX(var(--skew, 0deg)); transition: transform 0.2s; }
.marquee-track span.o { color: transparent; -webkit-text-stroke: 2px rgba(126, 217, 87, 0.85); }
.marquee-track i { flex: none; width: 22px; height: 22px; border-radius: 4px; background: var(--grass); transform: rotate(45deg); box-shadow: inset -4px -4px 0 rgba(0, 0, 0, 0.25), inset 3px 3px 0 rgba(255, 255, 255, 0.3); }
.marquee-track i:nth-of-type(3n) { background: var(--torch); }
.marquee-track i:nth-of-type(3n + 1) { background: var(--water); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---- the builder (features) ---------------------------------------------------- */
.builder-wrap { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: center; max-width: 1200px; margin: clamp(30px, 5vw, 60px) auto clamp(40px, 6vw, 70px); }
.builder { position: relative; height: clamp(300px, 52vh, 520px); border-radius: 28px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 30%, #2b4f7e, #142440 70%); box-shadow: inset 0 0 0 1px var(--line), 0 30px 70px rgba(0, 0, 0, 0.4); }
.builder-text h3 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); }
.builder-text p { margin-top: 12px; color: var(--muted); font-size: 1.08rem; }
@media (max-width: 820px) { .builder-wrap { grid-template-columns: 1fr; } }

/* ---- creatures on the download cards -------------------------------------------- */
.platforms-wrap { position: relative; max-width: 1080px; margin: clamp(170px, 18vw, 200px) auto 0; }
.platforms-wrap .platforms { margin-top: 0; }
.ledge { position: absolute; left: 0; right: 0; bottom: 100%; height: 170px; }
.alt-link { font-size: 0.85rem; color: var(--muted); }
.alt-link a { color: var(--ink); font-weight: 700; text-underline-offset: 3px; }
.guide-link { text-align: center; margin-top: 18px; }

/* ---- the official Instagram page ------------------------------------------------------------- */
.license {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(22px, 4vw, 44px); align-items: center; max-width: 920px; margin: 56px auto 0;
  padding: clamp(22px, 4vw, 36px); border-radius: 28px; background: linear-gradient(135deg, rgba(255, 204, 77, 0.09), rgba(126, 217, 87, 0.05));
  border: 1px solid rgba(255, 204, 77, 0.3);
}
.license-card {
  position: relative; overflow: hidden; width: 250px; aspect-ratio: 1.586; padding: 18px; border-radius: 16px;
  display: flex; flex-direction: column; justify-content: space-between;
  background: linear-gradient(135deg, #1d2d52, #0f172a 58%, #33250b); border: 1px solid rgba(255, 204, 77, 0.5);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  animation: card-float 6s ease-in-out infinite;
}
.license-card::after { content: ""; position: absolute; inset: -40%; background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.2) 50%, transparent 58%); animation: shine 4.5s ease-in-out infinite; }
@keyframes card-float { 0%, 100% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(-3deg) translateY(-8px); } }
@keyframes shine { 0%, 60% { transform: translateX(-60%); } 100% { transform: translateX(60%); } }
.lc-brand { font: 800 1rem var(--display); letter-spacing: 0.3em; color: var(--gold); }
.lc-code { font: 700 0.92rem ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0.04em; color: #fff; }
.lc-foot { font: 700 0.75rem var(--display); color: var(--muted); }
.license-text h3 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
.license-text p { color: var(--muted); margin-top: 8px; }
.btn-insta { --face: #d62976; --side: #6e1240; --text-c: #fff; margin-top: 18px; background: linear-gradient(45deg, #f58529, #dd2a7b 45%, #8134af 78%, #515bd4); }
.btn-insta svg { width: 22px; height: 22px; }
.license-creator { margin-top: 12px; font-size: 0.9rem; color: var(--muted); }
.license-creator a { color: var(--ink); font-weight: 700; text-underline-offset: 3px; }
@media (max-width: 720px) { .license { grid-template-columns: 1fr; justify-items: center; text-align: center; } }

/* ---- the install guide ------------------------------------------------------------- */
html.modal-open { overflow: hidden; }
.install {
  width: min(780px, calc(100% - 20px)); max-height: calc(100vh - 28px); max-height: calc(100dvh - 28px); padding: 0; margin: auto;
  border: 1px solid rgba(126, 217, 87, 0.35); border-radius: 26px; background: #0e1628; color: var(--ink);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.7); overflow: auto; overscroll-behavior: contain;
}
.install[open] { animation: dialog-in 0.5s cubic-bezier(0.2, 1.2, 0.4, 1); }
.install::backdrop { background: rgba(5, 8, 16, 0.75); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(40px) scale(0.95); } }
.install-close { position: sticky; top: 12px; float: right; z-index: 3; width: 38px; height: 38px; margin: 12px 12px 0 0; border-radius: 10px; border: 1px solid var(--line); background: rgba(20, 30, 52, 0.9); color: var(--ink); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.install-head { padding: 28px 30px 12px; }
.install-head h2 { font-size: clamp(1.6rem, 4vw, 2.3rem); }
.install-head p:last-child { margin-top: 10px; color: var(--muted); }
.install-tabs { position: sticky; top: 0; z-index: 2; display: flex; gap: 8px; padding: 12px 30px; background: #0e1628; border-bottom: 1px solid var(--line); }
.install-tabs button { padding: 9px 16px; border-radius: 12px; border: 1px solid var(--line); background: transparent; color: var(--muted); font: 800 0.95rem var(--display); cursor: pointer; }
.install-tabs button[aria-selected="true"] { background: var(--grass); border-color: var(--grass); color: #0d2a0f; box-shadow: 0 4px 0 var(--grass-3); }
.install-panel { padding: 22px 30px 6px; }
.install-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }
.install-steps > li { display: grid; grid-template-columns: 38px 1fr; gap: 16px; }
.install-steps > li > b { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--grass); color: #0d2a0f; font: 800 1.05rem var(--display); box-shadow: 0 4px 0 var(--grass-3); }
.install-steps h3 { font-size: 1.12rem; }
.install-steps p { margin-top: 4px; color: var(--muted); }
.install pre { margin: 8px 0; padding: 12px 14px; border-radius: 12px; background: #060a14; border: 1px solid var(--line); overflow-x: auto; font-size: 0.88rem; }
.install code { font-size: 0.9em; }
kbd { font: 700 0.86em var(--display); padding: 1px 7px; border-radius: 6px; white-space: nowrap; color: var(--ink); background: rgba(255, 255, 255, 0.1); border: 1px solid var(--line); border-bottom-width: 2px; }
.install-alt { margin-top: 20px; color: var(--muted); }
.install-alt summary { cursor: pointer; font: 800 0.95rem var(--display); color: var(--ink); }
.install-next { margin: 20px 30px 30px; padding: 22px; border-radius: 20px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); }
.install-next h3 { font-size: 1.2rem; }
.next-steps { margin: 10px 0 0; padding-left: 1.3em; color: var(--muted); }
.license-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--line); }
.license-box p { margin-top: 4px; max-width: 30em; color: var(--muted); }
.license-box .btn-insta { margin-top: 0; }
@media (max-width: 560px) {
  .install-head, .install-panel { padding-left: 18px; padding-right: 18px; }
  .install-tabs { padding: 10px 18px; }
  .install-next { margin: 18px 12px 18px; }
  .install-steps > li { grid-template-columns: 1fr; gap: 8px; }
}

/* ---- the drawn system windows of the guide ----------------------------------------- */
.mock { position: relative; margin-top: 12px; max-width: 100%; font: 12.5px/1.4 -apple-system, "Segoe UI", system-ui, sans-serif; user-select: none; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45); }
.mock .hl { position: relative; box-shadow: 0 0 0 2px var(--gold); animation: hl 1.6s ease-in-out infinite; }
.mock .hl::after {
  content: ""; position: absolute; right: -10px; bottom: -16px; width: 18px; height: 22px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 22'%3E%3Cpath d='M1 1v17l4.5-4.2 3 6.7 3-1.4-3-6.6H15z' fill='white' stroke='black' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat;
  animation: tap 1.6s ease-in-out infinite;
}
@keyframes hl { 50% { box-shadow: 0 0 0 6px rgba(255, 204, 77, 0.3), 0 0 0 2px var(--gold); } }
@keyframes tap { 50% { transform: translate(-3px, -3px); } }
.mock-dmg { display: flex; align-items: center; gap: 16px; width: 330px; padding: 16px 22px; border-radius: 14px; background: #eceef2; color: #222; }
.mock-dmg img { width: 58px; height: 58px; animation: drag 2.4s ease-in-out infinite; }
@keyframes drag { 0%, 20% { transform: none; } 60%, 75% { transform: translateX(150px) scale(0.6); opacity: 0.3; } 100% { transform: none; opacity: 1; } }
.mock-dmg .arrow { position: relative; flex: 1; height: 3px; background: repeating-linear-gradient(90deg, #8a8f99 0 8px, transparent 8px 14px); }
.mock-dmg .arrow::after { content: ""; position: absolute; right: -2px; top: -6px; border: 7.5px solid transparent; border-left: 10px solid #8a8f99; border-right: 0; }
.mock-dmg .folder { position: relative; display: grid; place-items: end center; width: 66px; height: 52px; padding-bottom: 5px; border-radius: 3px 7px 7px 7px; background: linear-gradient(#72bdf7, #3b95e6); color: #fff; font-size: 9px; font-weight: 700; }
.mock-dmg .folder::before { content: ""; position: absolute; left: 0; top: -6px; width: 26px; height: 8px; border-radius: 4px 4px 0 0; background: #72bdf7; }
.mac-alert { width: 270px; padding: 18px 16px 14px; border-radius: 14px; background: #ececec; color: #1d1d1f; text-align: center; }
.mac-alert img { width: 46px; height: 46px; margin: 0 auto; }
.mac-alert .t { margin-top: 8px; font-weight: 700; font-size: 13px; }
.mac-alert .s { margin: 6px 0 12px; font-size: 11px; color: #444; }
.mac-alert .mbtn { display: block; margin-top: 6px; padding: 5px; border-radius: 7px; background: #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); }
.mac-alert .mbtn.hl { background: #0a7cff; color: #fff; }
.mac-settings { display: grid; grid-template-columns: 138px 1fr; width: 440px; max-width: 100%; overflow: visible; border-radius: 12px; background: #f6f6f6; color: #1d1d1f; }
.mac-settings .side { display: flex; flex-direction: column; gap: 3px; padding: 12px 8px; border-radius: 12px 0 0 12px; background: #e6e6e9; }
.mac-settings .side span { padding: 4px 8px; border-radius: 6px; font-size: 11px; }
.mac-settings .side .on { background: #0a7cff; color: #fff; }
.mac-settings .main { padding: 14px 16px; }
.mac-settings .h { font-weight: 700; }
.mac-settings .s { margin: 6px 0 10px; font-size: 11.5px; color: #333; }
.mac-settings .mbtn { display: inline-block; padding: 4px 12px; border-radius: 6px; background: #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); }
.win-ss { width: 400px; max-width: 100%; padding: 18px 20px; border-radius: 3px; background: #0063b1; color: #fff; font-family: "Segoe UI", system-ui, sans-serif; }
.win-ss .t { font-size: 19px; font-weight: 300; }
.win-ss .s { margin: 8px 0 10px; opacity: 0.92; }
.win-ss .link { display: inline-block; padding: 1px 3px; text-decoration: underline; }
.win-ss .row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.win-ss .wbtn { padding: 5px 14px; border: 2px solid rgba(255, 255, 255, 0.85); }
.browser-dl { display: grid; gap: 4px; width: 300px; padding: 12px 14px; border-radius: 12px; background: #fff; color: #202124; }
.browser-dl .file { font-weight: 700; }
.browser-dl .s { color: #5f6368; }
.browser-dl .menu { display: flex; gap: 8px; margin-top: 6px; }
.browser-dl .menu span { padding: 4px 10px; border-radius: 6px; background: #f1f3f4; }

@media (prefers-reduced-motion: reduce) {
  .scroll-scene { height: auto; }
  .scene-sticky { position: relative; height: auto; min-height: 80vh; }
  .pl { opacity: 1 !important; position: relative; margin-bottom: 16px; }
  .scene-lines { position: relative; display: block; padding: 12vh var(--gutter); }
}