/* TinyBook section/base layer. Shared system recipes and components have explicit precedence. */
@layer website-base {
/* The live rig owns only this temporary surface; the hero keeps its layout. */
html[data-intro="boot"] { height: 100%; overflow: hidden; overscroll-behavior: none; }
html[data-intro="boot"] body { position: fixed; inset: 0; overflow: hidden; }
html[data-intro="boot"] body > * { visibility: hidden; }
html[data-intro="boot"] body > #intro-preloader { display:grid; visibility:visible; z-index:31; }
.intro-preloader-activity { width:96px; height:96px; }
.intro-character { display:block; width:100%; height:100%; }
.intro-preloader { position: fixed; inset: 0; z-index: 26; display: grid; place-items: center; background: #fff; pointer-events: none; }
.intro-preloader.intro-logo-handoff { background:transparent; display:block; }
.intro-logo-handoff .intro-preloader-activity { position:absolute; left:0; top:0; width:378px; height:352px; transform-origin:0 0; will-change:transform,opacity; }
.intro-preloader[hidden] { display:none; }
.intro-loading-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.intro-loading-message { position:absolute; top:calc(50% + 64px); left:50%; width:max-content; max-width:min(30ch,calc(100vw - 48px)); margin:0; transform:translateX(-50%); text-align:center; color:var(--secondary,#6e6e73); font:400 12px/1.4 -apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif; letter-spacing:.01em; opacity:1; transition:opacity 180ms ease; }
.intro-loading-message.is-changing,
.intro-loading-message.is-leaving { opacity:0; }
.intro-loading-message[hidden],
.intro-logo-handoff .intro-loading-message { display:none; }
html[data-intro-scroll-locked] { height: 100%; overflow: hidden; overscroll-behavior: none; }
html[data-intro-scroll-locked] body { position: fixed; top: var(--intro-scroll-y, 0px); left: 0; right: var(--intro-scrollbar, 0px); overflow: hidden; overscroll-behavior: none; }
.intro-stage { position: fixed; inset: 0; z-index: 25; overflow: hidden; pointer-events: none; }
.intro-backdrop { position: absolute; inset: 0; background: #fff; opacity: var(--intro-backdrop, 1); }
.intro-surface { position: absolute; left: 0; top: 0; transform-origin: 0 0; opacity: var(--intro-opacity, 1); will-change: transform, opacity; }
.intro-surface canvas { position:static; display:block; width:100% !important; height:100% !important; background:transparent; pointer-events:none; filter:blur(var(--intro-blur,0px)); will-change:filter; }
.motion-button[hidden] { display: none;}
html[data-intro] .hero-heading > .eyebrow,
html[data-intro] .offer-note,
html[data-intro] .viewer-hint{ opacity: var(--intro-details, 0);}
html[data-intro] .hero-description,
html[data-intro] .viewer-controls,
html[data-intro] .hero .availability { opacity: var(--intro-details, 0); }
html[data-intro] .hero h1 { opacity: var(--intro-headline, 0); }
html[data-intro] .hero-actions { opacity: var(--intro-actions, 0); }
html[data-intro] .navigation { opacity: var(--intro-navigation, 0); }
html[data-intro] #device-viewer { cursor: default; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .intro-stage, .intro-preloader { display: none; }
  html[data-intro] .hero-copy > *, html[data-intro] .hero-heading > *, html[data-intro] .viewer-controls, html[data-intro] .hero .availability,
  html[data-intro] .navigation { opacity: 1; }
  html[data-intro] .viewer-hint{ opacity: 1;}
}

/* Controls dock beneath the device after the opening. */
.viewer-wrap { position:relative; }
.viewer-controls #motion-toggle { position:relative; }
@media(prefers-reduced-motion:reduce) { .viewer-controls .hero-motion-control { display:none; } }

}

/* Overlay placement must take precedence over the shared button's position.
   Component styling still owns its size, type, surface and focus treatment. */
body > .intro-skip { position:fixed; right:max(24px,env(safe-area-inset-right)); top:max(20px,env(safe-area-inset-top)); z-index:26; }
body > .intro-skip[hidden] { display:none; }
@media(prefers-reduced-motion:reduce) { body > .intro-skip { display:none; } }