/* =====================================================================
   CUE web intro - styles
   The stage takes the window's shape. Its short side is always 1080 units;
   intro.js sets the long side and scales the stage to fit the window.
   ===================================================================== */

html, body { margin: 0; height: 100%; background: #0d0a24; overflow: hidden;
             font-family: -apple-system, "Segoe UI", Roboto, sans-serif; }
#wrap { position: absolute; inset: 0 0 56px 0; overflow: hidden; }
body.no-controls #wrap { bottom: 0; }
/* iPhone Safari only reports taps on parts of the page that look clickable, so mark the picture as clickable on touch screens */
@media (hover: none) { #wrap { cursor: pointer; -webkit-tap-highlight-color: transparent; } }
#stage { position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; overflow: hidden;
         transform-origin: 50% 50%; }

/* ---------- Sky (logo intro) ---------- */
/* the sky photo is a small, smoothed copy (17 KB); its grain is a tiny tile drawn by intro.js and repeated */
#sky { position: absolute; inset: 0; background: #8cc4ef center / cover no-repeat; }
#skyGrain { position: absolute; inset: 0; background-repeat: repeat; }
/* Duncan's cloud pictures (assets/sky/cloud1-7.webp), sized and moved by intro.js */
.cloud { position: absolute; left: 0; top: 0; will-change: transform; display: block; height: auto; }

/* ---------- Space (everything after the logo) ---------- */
#space { position: absolute; inset: 0; visibility: hidden; background: #000; overflow: hidden; }
/* the star photo, a little bigger than the screen so its slow drift, turn and zoom never show an edge */
#spaceBg { position: absolute; left: -10%; top: -10%; width: 120%; height: 120%; object-fit: cover;
           transform-origin: 50% 50%; will-change: transform; }
.star { position: absolute; left: 0; top: 0; width: 3px; height: 3px; border-radius: 50%; background: #fff;
        will-change: transform; }

/* ---------- Cards ---------- */
#world { position: absolute; inset: 0; perspective: 1600px; }
.card { position: absolute; left: 0; top: 0; width: 330px; height: 462px; margin: -231px 0 0 -165px;
        transform-style: preserve-3d; will-change: transform; display: none; }
.face, .back { position: absolute; inset: 0; border-radius: 22px; backface-visibility: hidden;
               -webkit-backface-visibility: hidden; box-shadow: 0 18px 40px rgba(0,0,0,.45); overflow: hidden; }
.face img { width: 100%; height: 100%; display: block; }
.back { transform: rotateY(180deg); background: radial-gradient(circle at 50% 42%, #7a4dff 0%, #3a1fa8 55%, #1c0f5c 100%);
        border: 10px solid #e9ecf2; box-sizing: border-box; display: flex; align-items: center; justify-content: center; }
.back img { width: 72%; }

/* ---------- Sgt Pepper collage ---------- */
/* outside the picture: sky above, soil below (matches the edges of the collage) */
#pepper { position: absolute; inset: 0; display: none; overflow: hidden; }   /* see-through: the sky photo shows behind the characters */
/* the collage at its own pixel size (2766 x 1799); intro.js moves and scales it like a camera */
#pepperCam { position: absolute; left: 0; top: 0; width: 2766px; height: 1799px; transform-origin: 0 0; will-change: transform; }
/* the sky-to-soil gradient from the Photoshop file, drawn in code and stretched wide for ultra-wide screens */
#pepperSky { display: none; }   /* (no longer used: the sky photo is behind the whole scene) */
.pp { position: absolute; left: 0; top: 0; will-change: transform; }

/* ---------- Phone frame for the holding footage (size set by intro.js) ---------- */
#phone { position: absolute; left: 0; top: 0; box-sizing: border-box; border-radius: 70px; padding: 22px;
         background: linear-gradient(145deg, #3b3b46, #0d0d12 40%, #24242c); visibility: hidden; z-index: 500;
         box-shadow: 0 30px 70px rgba(0, 0, 0, .55), inset 0 0 0 3px #5a5a66; will-change: transform; }
#phoneScreen { position: relative; width: 100%; height: 100%; border-radius: 50px; overflow: hidden; background: #000; }
#phoneScreen video { width: 100%; height: 100%; object-fit: cover; display: block; }
#notch { position: absolute; left: 50%; top: 34px; width: 30%; height: 30px; transform: translateX(-50%);
         background: #0d0d12; border-radius: 0 0 18px 18px; }

/* ---------- Logo (its own pixel size 1535 x 1640, scaled by intro.js) ---------- */
#logo { position: absolute; left: 0; top: 0; width: 1535px; height: 1640px; transform-origin: 768px 820px;
        will-change: transform; }
#logo > img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* the mask sits in the dark circle (centre 768,768, radius 640 in logo pixels), clipped to it */
#window { position: absolute; inset: 0; clip-path: circle(640px at 768px 768px); -webkit-clip-path: circle(640px at 768px 768px); }
#banner { z-index: 1; }

/* ---------- The mask (real puppet layers from Chad.psd, 496 x 586) ---------- */
.mask { position: absolute; left: 0; top: 0; width: 496px; height: 586px; transform-origin: 248px 293px; will-change: transform; }
.mask img { position: absolute; inset: 0; width: 100%; height: 100%; }
.mask .lid { display: none; }
#maskFree { margin: -293px 0 0 -248px; transform-origin: 50% 50%; visibility: hidden; z-index: 1000; }

#cloudsFront { position: absolute; inset: 0; pointer-events: none; }
#flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }

/* ---------- End card buttons (positioned under the logo by intro.js) ---------- */
#endcard { position: absolute; left: 0; top: 0; display: flex; justify-content: center; align-items: flex-start; padding-top: 40px; box-sizing: border-box;
           gap: 34px; z-index: 1100; }   /* always on screen, above everything (so they can always be clicked) */
#endcard.portrait { flex-wrap: wrap; align-content: flex-start; gap: 24px 30px; }   /* badges side by side, portal button below */
.endbtn { display: flex; flex-direction: column; justify-content: center; box-sizing: border-box;
          height: 104px; padding: 0 40px; border-radius: 22px; text-decoration: none; cursor: pointer;
          box-shadow: 0 10px 28px rgba(0, 0, 0, .35); }
#endcard.portrait .endbtn.portal { min-width: 726px; }
.endbtn .small { font-size: 22px; font-weight: 600; letter-spacing: .5px; line-height: 1.1; }
.endbtn .big { font-size: 40px; font-weight: 800; line-height: 1.1; }
/* the official store badges (Duncan's App Store and Google Play button images) */
.endbtn.store { background: none; border: 0; padding: 0; box-shadow: none; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .35)); }
.endbtn.store img { display: block; height: 104px; width: auto; }
.endbtn.portal { background: linear-gradient(90deg, #e43ae9, #8b5cf6 55%, #4fa3ff); color: #fff;
                 border: 4px solid #fff; min-width: 420px; align-items: center; border-radius: 12px; }   /* same corner rounding as the store badges */
.endbtn:hover { filter: brightness(1.12); }
.endbtn.store:hover { filter: brightness(1.15) drop-shadow(0 10px 18px rgba(0, 0, 0, .35)); }
.endbtn:focus-visible { outline: 6px solid #fff; outline-offset: 4px; }

/* ---------- Satellite and cannon ball (moved by intro.js) ---------- */
.extra { position: absolute; left: 0; top: 0; visibility: hidden; will-change: transform; }
#satellite { width: 460px; z-index: 29; }
#cannonball { width: 210px; z-index: 30; }

/* ---------- Subtitles and the CC (language) button: real screen pixels, not stage units ---------- */
#subs { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 1200; max-width: min(92%, 900px);
        width: max-content; box-sizing: border-box; padding: 6px 14px; border-radius: 10px; background: rgba(0, 0, 0, .68);
        color: #fff; font-size: clamp(15px, 2.1vw, 24px); font-weight: 600; line-height: 1.3; text-align: center;
        pointer-events: none; }
#subs:empty { display: none; }
#ccWrap { position: absolute; top: 12px; right: 12px; z-index: 1300; }
#ccBtn { background: rgba(0, 0, 0, .55); color: #fff; border: 2px solid rgba(255, 255, 255, .85); border-radius: 8px;
         font-family: inherit; font-weight: 800; font-size: 14px; line-height: 1; padding: 7px 9px; cursor: pointer; letter-spacing: .5px; }
#ccBtn.on { background: #fff; color: #3a1f9e; }
#ccMenu { position: absolute; top: calc(100% + 6px); right: 0; background: #fff; border-radius: 12px; padding: 6px;
          box-shadow: 0 10px 28px rgba(0, 0, 0, .35); display: flex; flex-direction: column; min-width: 190px; }
#ccMenu[hidden] { display: none; }
#ccMenu button { background: none; border: 0; text-align: left; padding: 9px 12px; border-radius: 8px; font-family: inherit; font-weight: 600; font-size: 15px; line-height: 1.2; color: #1b2233; cursor: pointer; }
#ccMenu button:hover { background: #eef0fa; }
#ccMenu button.sel { color: #5b3fd6; font-weight: 800; }
#ccMenu button.sel::after { content: " \2713"; }

/* ---------- Start screen, before any of the intro ---------- */
/* the start screen covers everything until the visitor taps in; deep space colour with a faint glow */
#gate { position: absolute; inset: 0; z-index: 3000; display: flex; flex-direction: column; align-items: center;
        justify-content: center; gap: 22px; padding: 0 24px; box-sizing: border-box; text-align: center;
        background: radial-gradient(ellipse at 50% 45%, #241a5c 0%, #0d0a24 60%, #05040f 100%); transition: opacity .45s ease; }
#gate.gone { opacity: 0; pointer-events: none; }
.gateTitle { margin: 0; color: #fff; font-size: clamp(22px, 4.2vw, 40px); font-weight: 800; letter-spacing: .3px; text-wrap: balance; }
.gateNote { margin: 0; color: rgba(255, 255, 255, .6); font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; }
#start { background: linear-gradient(90deg, #e43ae9, #8b5cf6 55%, #4fa3ff); color: #fff; border: 3px solid #fff;
         border-radius: 12px; font-family: inherit; font-weight: 800; font-size: clamp(18px, 2.6vw, 24px);
         padding: 16px 34px; cursor: pointer; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); transition: transform .15s, opacity .2s; }
#start:hover { transform: scale(1.04); }
#start:focus-visible { outline: 4px solid #fff; outline-offset: 4px; }
#start:disabled { opacity: .6; cursor: progress; transform: none; }

/* ---------- Review controls (hidden on the live site with ?live in the address) ---------- */
#controls { position: absolute; left: 0; right: 0; bottom: 0; height: 56px; display: flex;
            align-items: center; gap: 12px; padding: 0 16px; background: #161233; color: #fff; box-sizing: border-box; }
body.no-controls #controls { display: none; }
#controls button { background: #5b3fd6; color: #fff; border: 0; border-radius: 8px;
                   padding: 8px 14px; font-size: 14px; font-weight: 600; cursor: pointer; }
#controls button:hover { background: #6d52ea; }
#scrub { flex: 1; min-width: 60px; accent-color: #8f78ff; }
#time { font-variant-numeric: tabular-nums; font-size: 13px; opacity: .85; min-width: 84px; }
#build { font-size: 12px; background: #fff; color: #5b3fd6; border-radius: 99px; padding: 2px 10px; font-weight: 700; white-space: nowrap; }
@media (max-width: 560px) { #build { display: none; } #controls { gap: 8px; } }