/* Home background, watermark, cube scene and home responsive styles.
   Related rules retain their original cascade order. */

/* ---- 02-home ---- */
/* ===================== HOME BACKGROUND LOGO (SHZONG) & FLOATING SQUARES ===================== */
/* Sits behind #scene-canvas (lower z-index) so assets/home/CUBEglb.glb renders on top
   of it. Now shown on every page/face (not just HOME) per request. */
#home-squares-bg {
    position: fixed;
    inset: 0;
    z-index: 15;
    height: 100vh;
    opacity: 1;
    pointer-events: none;
    transition: opacity 0.6s ease;
}

/* Horizontal dome/arc sitting right at the top edge of the screen — the
   div's top is only slightly negative now so a good chunk of the curve
   itself is visible (not just a thin sliver). Wide + short height keeps
   the curve flat/horizontal instead of circular. box-shadow + inner
   gradient give it depth so it doesn't read as a flat cutout. */
#home-top-dome {
    display: none;
}

#home-squares-bg::before {
    display: none;
}

#home-squares-bg::after {
    z-index: 1000;
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20vh;
    background-image: linear-gradient(0deg, rgba(235, 235, 235, 0.4) 0%, rgba(235, 235, 235, 0.00) 100%);
    pointer-events: none;
}

.squares {
    height: 100%;
    display: flex;
    justify-content: space-around;
    overflow: hidden;
    /* Soft fade at the left/right edges so blurred squares don't look like
       they're getting abruptly sliced off by the viewport, especially on
       narrow mobile widths. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

.square {
    animation: squares 4.5s linear infinite;
    align-self: flex-end;
    width: 1.2em;
    height: 1.2em;
    transform: translateY(100%);
    background: #ebebeb;
}

.square:nth-child(1) {
    height: 1em;
    width: 1em;
    animation-delay: 0s;
    animation-duration: 4s;
    filter: blur(1px);
    -webkit-filter: blur(1px);
}

.square:nth-child(2) {
    height: 1.5em;
    width: 3em;
    animation-delay: -1s;
    animation-duration: 6s;
    filter: blur(5px);
    -webkit-filter: blur(5px);
}

.square:nth-child(3) {
    height: 2em;
    width: 1em;
    animation-delay: -2s;
    animation-duration: 3.5s;
    filter: blur(0px);
    -webkit-filter: blur(0px);
}

.square:nth-child(4) {
    height: 1em;
    width: 1.5em;
    animation-delay: -0.5s;
    animation-duration: 5s;
    filter: blur(3px);
    -webkit-filter: blur(3px);
}

.square:nth-child(5) {
    height: 1.25em;
    width: 2em;
    animation-delay: -3s;
    animation-duration: 4.2s;
    filter: blur(2px);
    -webkit-filter: blur(2px);
}

.square:nth-child(6) {
    height: 2.5em;
    width: 2em;
    animation-delay: -1.5s;
    animation-duration: 3.8s;
    filter: blur(1px);
    -webkit-filter: blur(1px);
}

.square:nth-child(7) {
    height: 4em;
    width: 2em;
    animation-delay: -2.5s;
    animation-duration: 5.5s;
    filter: blur(2.5px);
    -webkit-filter: blur(2.5px);
}

.square:nth-child(8) {
    height: 1em;
    width: 3em;
    animation-delay: -4s;
    animation-duration: 7s;
    filter: blur(6px);
    -webkit-filter: blur(6px);
}

.square:nth-child(9) {
    height: 3em;
    width: 2.4em;
    animation-delay: -3.5s;
    animation-duration: 4.8s;
    filter: blur(0.5px);
    -webkit-filter: blur(0.5px);
}

.square:nth-child(10) {
    height: 1.8em;
    width: 1.2em;
    animation-delay: -1.8s;
    animation-duration: 3.2s;
    filter: blur(1.5px);
    -webkit-filter: blur(1.5px);
}

.square:nth-child(11) {
    height: 2.2em;
    width: 2.8em;
    animation-delay: -0.8s;
    animation-duration: 5.2s;
    filter: blur(4px);
    -webkit-filter: blur(4px);
}

.square:nth-child(12) {
    height: 1.4em;
    width: 1.4em;
    animation-delay: -2.2s;
    animation-duration: 4s;
    filter: blur(2px);
    -webkit-filter: blur(2px);
}

.square:nth-child(13) {
    height: 3.5em;
    width: 1.8em;
    animation-delay: -3.8s;
    animation-duration: 4.6s;
    filter: blur(1px);
    -webkit-filter: blur(1px);
}

.square:nth-child(14) {
    height: 1.2em;
    width: 2.5em;
    animation-delay: -1.2s;
    animation-duration: 3.6s;
    filter: blur(3.5px);
    -webkit-filter: blur(3.5px);
}

.square:nth-child(15) {
    height: 2.8em;
    width: 1.2em;
    animation-delay: -4.2s;
    animation-duration: 5.8s;
    filter: blur(0px);
    -webkit-filter: blur(0px);
}

.square:nth-child(16) {
    height: 1.6em;
    width: 3.2em;
    animation-delay: -0.3s;
    animation-duration: 4.4s;
    filter: blur(4.5px);
    -webkit-filter: blur(4.5px);
}

.square:nth-child(17) {
    height: 2.4em;
    width: 2.2em;
    animation-delay: -2.7s;
    animation-duration: 3.9s;
    filter: blur(1.8px);
    -webkit-filter: blur(1.8px);
}

.square:nth-child(18) {
    height: 1em;
    width: 2em;
    animation-delay: -3.1s;
    animation-duration: 4.1s;
    filter: blur(2.8px);
    -webkit-filter: blur(2.8px);
}

.square:nth-child(19) {
    height: 3.2em;
    width: 1.6em;
    animation-delay: -1.6s;
    animation-duration: 5s;
    filter: blur(0.8px);
    -webkit-filter: blur(0.8px);
}

.square:nth-child(20) {
    height: 2em;
    width: 2.5em;
    animation-delay: -4.5s;
    animation-duration: 3.4s;
    filter: blur(3px);
    -webkit-filter: blur(3px);
}

@keyframes squares {
    from {
        transform: translateY(100%) rotate(-50deg);
    }

    to {
        transform: translateY(calc(-100vh + -100%)) rotate(20deg);
    }
}

#home-bg-logo {
    position: fixed;
    inset: 0;
    z-index: 25;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Bungee', 'Michroma', 'Audiowide', sans-serif;
    font-size: min(22vw, 250px);
    font-weight: 900;
    color: rgba(235, 244, 246, 0.18);
    -webkit-text-stroke: clamp(1px, 0.18vw, 3px) rgba(20, 24, 24, 0.72);
    text-stroke: clamp(1px, 0.18vw, 3px) rgba(20, 24, 24, 0.72);
    paint-order: stroke fill;
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.6)) drop-shadow(0 14px 22px rgba(0, 0, 0, 0.16));
    text-transform: uppercase;
    letter-spacing: 0.04em;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.4s ease;
    user-select: none;
    text-align: center;
    line-height: 0.9;
}

body.plain-home-bg #home-bg-logo,
#home-bg-logo.visible {
    opacity: 0.22;
}

/* Watermark Stacked & X-Scale Formatting */
.wm-stacked {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 0.82;
}

#home-bg-logo .wm-single,
#home-bg-logo .wm-line {
    background-image:
        radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.98) 0 1px, transparent 1.8px),
        radial-gradient(circle at 76% 30%, rgba(255, 255, 255, 0.75) 0 1.4px, transparent 2.4px),
        radial-gradient(circle at 42% 74%, rgba(255, 255, 255, 0.62) 0 1px, transparent 2px),
        radial-gradient(circle at 88% 78%, rgba(255, 255, 255, 0.7) 0 0.9px, transparent 1.8px),
        linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(210, 224, 226, 0.2) 42%, rgba(255, 255, 255, 0.55) 58%, rgba(170, 185, 188, 0.16));
    background-size: 86px 86px, 132px 132px, 118px 118px, 96px 96px, 100% 100%;
    background-position: 0 0, 28px 12px, 54px 34px, 12px 48px, 0 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: inherit;
    text-stroke: inherit;
    paint-order: inherit;
    text-shadow:
        0 -1px 0 rgba(255, 255, 255, 0.55),
        0 1px 2px rgba(255, 255, 255, 0.28),
        0 10px 28px rgba(60, 68, 70, 0.22);
    animation: moistGlassDrift 8s ease-in-out infinite alternate;
}

#home-bg-logo .wm-letter {
    display: inline-block;
    transform: translateY(0);
    opacity: 1;
    transition:
        transform 520ms cubic-bezier(0.18, 0.92, 0.24, 1),
        opacity 360ms ease;
    transition-delay: var(--letter-delay, 0ms);
    will-change: transform, opacity;
}

#home-bg-logo.wm-exiting .wm-letter {
    transform: translateY(0.34em);
    opacity: 0;
}

#home-bg-logo.wm-entering .wm-letter {
    animation: wmLetterIn 640ms cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: var(--letter-delay, 0ms);
}

@keyframes wmLetterIn {
    from {
        transform: translateY(0.42em);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes moistGlassDrift {
    0% {
        background-position: 0 0, 28px 12px, 54px 34px, 12px 48px, 0 0;
        filter: blur(0px);
    }

    100% {
        background-position: 10px 18px, 18px 30px, 68px 46px, 24px 30px, 0 0;
        filter: blur(0.35px);
    }
}

.wm-3dmodel .wm-3d {
    display: inline-block;
    transform: scaleX(2.35);
    transform-origin: center center;
    letter-spacing: 0.05em;
    font-size: 0.88em;
    margin-bottom: 0.05em;
}

.wm-3dmodel .wm-model {
    display: inline-block;
    font-size: 0.88em;
    letter-spacing: 0.06em;
}

.wm-motiongraph .wm-line {
    display: block;
    font-size: 0.8em;
    line-height: 0.85;
    letter-spacing: 0.06em;
}

@media (max-width: 700px) {
    #home-bg-logo {
        background-size: min(95vw, 700px) auto;
        background-position: center center;
        font-size: min(24vw, 110px);
    }}

/* ---- 03-scene ---- */
/* ===================== 3D SCENE CANVAS ===================== */
/* Fullscreen, sits behind the loader/viewfinder (z-index 1).
   Reveals by blooming outward from SQ1's exact center position.
   JS sets the clip-path origin dynamically before adding .visible. */
#cam-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    background-color: var(--fabric-base);
    background-image:
        /* Horizontal threads */
        repeating-linear-gradient(0deg,
            transparent,
            transparent calc(var(--fabric-cell) - 1.2px),
            var(--fabric-gap) calc(var(--fabric-cell) - 1.2px),
            var(--fabric-gap) var(--fabric-cell)),
        /* Vertical threads */
        repeating-linear-gradient(90deg,
            transparent,
            transparent calc(var(--fabric-cell) - 1.2px),
            var(--fabric-thread) calc(var(--fabric-cell) - 1.2px),
            var(--fabric-thread) var(--fabric-cell));
    background-size: var(--fabric-cell) var(--fabric-cell);
    transform: scale(1) rotate(0deg);
    transform-origin: 50% 50%;
    opacity: 0;
    transition: background-image 0.4s ease, background-color 0.4s ease,
        transform 0.75s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s ease;
    pointer-events: none;
}

/* Soft dark edge treatment so the scene light has something to fade into. */
#cam-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        linear-gradient(180deg,
            rgba(8, 9, 12, 0.12) 0%,
            rgba(8, 9, 12, 0.06) 7%,
            rgba(8, 9, 12, 0.00) 20%),
        linear-gradient(0deg,
            rgba(8, 9, 12, 0.20) 0%,
            rgba(8, 9, 12, 0.11) 9%,
            rgba(8, 9, 12, 0.00) 26%),
        linear-gradient(90deg,
            rgba(8, 9, 12, 0.24) 0%,
            rgba(8, 9, 12, 0.15) 7%,
            rgba(8, 9, 12, 0.00) 24%,
            rgba(8, 9, 12, 0.00) 76%,
            rgba(8, 9, 12, 0.15) 93%,
            rgba(8, 9, 12, 0.24) 100%);
    mix-blend-mode: multiply;
    pointer-events: none;
}

/* Only show the backdrop once the loading cinematic (camera punch-in/
   ease-out zoom) begins, so the zoom is still visible — but keep it
   hidden while the tap-to-start overlay is still up. */
body.experience-live #cam-bg {
    opacity: 1;
}

/* Horizontal split across #cam-bg — divides the fabric backdrop into a top
   and bottom half. The seam's ends (where it meets the bottom half) are
   rounded instead of a hard straight edge. */
#cam-bg::after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    top: 50%;
    bottom: 0;
    background-color: var(--fabric-gap);
    border-radius: 48px 48px 0 0;
    pointer-events: none;
}

/* Remove grid texture on HOME page so background is pure solid color matching the ripple */
body.plain-home-bg #cam-bg {
    background-image: none !important;
}

body.experience-live #cam-bg {
    background-image: none !important;
}

@media (max-width: 700px) {
    #cam-bg::before {
        background:
            linear-gradient(180deg,
                rgba(8, 9, 12, 0.10) 0%,
                rgba(8, 9, 12, 0.05) 8%,
                rgba(8, 9, 12, 0.00) 22%),
            linear-gradient(0deg,
                rgba(8, 9, 12, 0.16) 0%,
                rgba(8, 9, 12, 0.08) 10%,
                rgba(8, 9, 12, 0.00) 30%),
            linear-gradient(90deg,
                rgba(8, 9, 12, 0.20) 0%,
                rgba(8, 9, 12, 0.10) 9%,
                rgba(8, 9, 12, 0.00) 28%,
                rgba(8, 9, 12, 0.00) 72%,
                rgba(8, 9, 12, 0.10) 91%,
                rgba(8, 9, 12, 0.20) 100%);
    }}

/* ===================== HOME BACKGROUND LOGO (SHZONG) ===================== */
/* Sits behind #scene-canvas (lower z-index) so assets/home/CUBEglb.glb renders on top
   of it. Only fades in on HOME (body.plain-home-bg is toggled by
   navigateToFace() in scene.js) and stays invisible/inert everywhere else. */
#home-bg-logo {
    position: fixed;
    inset: 0;
    z-index: 25;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease;
}

body.plain-home-bg #home-bg-logo {
    opacity: 0.25;
}

/* ===================== 3D SCENE CANVAS ===================== */
/* Fullscreen, sits behind the loader/viewfinder (z-index 1).
   Reveals by blooming outward from SQ1's exact center position.
   JS sets the clip-path origin dynamically before adding .visible. */
#scene-canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    display: block;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    background-color: transparent;
    transition: opacity 0.6s ease;
    touch-action: none;
    cursor: default;
}

#scene-canvas.visible {
    opacity: 1;
    pointer-events: auto;
}

/* ── Mimics SQ1's scale(1.12) bounce — applied after cube appears in SQ1's spot ── */
@keyframes canvasScalePop {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.065);
    }

    100% {
        transform: scale(1);
    }
}

#scene-canvas.scale-pop {
    animation: canvasScalePop 0.72s cubic-bezier(0.34, 1.35, 0.35, 1) forwards;
}

#main-content {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    opacity: 0;
    transition: opacity 0.6s ease 0.4s, transform 0.75s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform: scale(1) rotate(0deg);
    transform-origin: 50% 50%;
    /* `transform` above makes #main-content establish its own stacking
       context (per spec, any element with a transform other than `none`
       is treated as if it were position:relative + z-index:0). Without an
       explicit z-index here, that context painted at the "0" level, BELOW
       #scene-canvas's inline z-index:30 — so the whole #page-panels tree
       (z-index 60), even though higher *inside* #main-content, was still
       losing to the cube because #main-content itself lost to it first.
       Giving #main-content its own explicit stacking level above the cube
       keeps the page panels above the cube while the cube remains alive
       underneath. */
    position: relative;
    z-index: 80;
    /* full-screen wrapper sits above the canvas; let hover/cursor reach #scene-canvas.
       #ui-layer / #page-panels already opt back in for their own elements. */
    pointer-events: none;
}

#main-content.visible {
    opacity: 1;
}

body:not(.page-panel-open) #main-content {
    touch-action: none;
    user-select: none;
}



/* Sharper, shorter rattle used for the page-panel transition impact —
   layers on top of the regular screen-shake above without replacing it. */
@keyframes screenShakeHeavy {
    0% {
        transform: translate(0, 0);
    }

    12% {
        transform: translate(-7px, 4px);
    }

    26% {
        transform: translate(6px, -5px);
    }

    40% {
        transform: translate(-5px, -3px);
    }

    54% {
        transform: translate(7px, 3px);
    }

    68% {
        transform: translate(-4px, 4px);
    }

    82% {
        transform: translate(3px, -2px);
    }

    100% {
        transform: translate(0, 0);
    }
}

body.screen-shake-heavy {
    animation: screenShakeHeavy 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

/* ---- 04-transitions ---- */


/* ---- Base colors per face ---- */
.page-panel[data-page="HOME"] {
    background: #1b1b1e;
}

/* ---- 05-nav-responsive ---- */


.square-bullet {
    width: 8px;
    height: 8px;
    background-color: #b80808b4;
    display: inline-block;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}

/* =====================================================================
   MOBILE RESPONSIVE — Main Breakpoints
   • ≤700px  : large phone / small tablet  (most layout shifts)
   • ≤480px  : phone portrait              (further scale-down)
   ===================================================================== */

@media (max-width: 700px) {

    /* ── HOME BG LOGO ─────────────────────────────────────────────── */
    #home-bg-logo {
        font-size: min(28vw, 180px);
    }

    /* ── HOME FLOATING SQUARES ────────────────────────────────────── */
    .square {
        width: 0.9em;
        height: 0.9em;
    }}

/* ── Extra small phones (≤480px) ───────────────────────────────────── */
@media (max-width: 480px) {

    #home-bg-logo {
        font-size: min(32vw, 130px);
    }}

body.page-panel-open #scene-canvas {
    pointer-events: none !important;
}
body.scene-covered :is(#home-bg-logo, #home-squares-bg) * {
    animation-play-state: paused !important;
}

@media (max-width: 700px) {
    #home-bg-logo {
        width: 100vw;
        padding-inline: 28px;
        box-sizing: border-box;
        font-size: clamp(4.5rem, 26vw, 11rem);
        letter-spacing: 0.08em;
        line-height: 0.95;
    }

    #home-bg-logo .wm-single,
#home-bg-logo .wm-stacked {
        max-width: 100%;
        min-width: 0;
        overflow-wrap: anywhere;
    }}

@media (max-width: 480px) {
    #home-bg-logo {
        padding-inline: 20px;
        font-size: clamp(4rem, 24vw, 9rem);
    }}

/* ---- 15-about-layout ---- */

body.apple-theme .about-fluted-background .home-lens-slab {
    display: block;
    top: auto;
    bottom: auto;
    height: calc(14.2857% - 2px);
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(255,255,255,.32), transparent 30%), #dfe0e2;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.84), inset 0 -1px 0 rgba(255,255,255,.72), 0 15px 24px -19px rgba(32,36,42,.56);
}
body.apple-theme .about-fluted-background .home-lens-slab:nth-child(1) { top: 0; background-color: #f1f1f3; }
body.apple-theme .about-fluted-background .home-lens-slab:nth-child(2) { top: 14.2857%; background-color: #c7c9cc; }
body.apple-theme .about-fluted-background .home-lens-slab:nth-child(3) { top: 28.5714%; background-color: #e7e8ea; }
body.apple-theme .about-fluted-background .home-lens-slab:nth-child(4) { top: 42.8571%; background-color: #d1d3d6; }
body.apple-theme .about-fluted-background .home-lens-slab:nth-child(5) { top: 57.1428%; background-color: #e9eaec; }
body.apple-theme .about-fluted-background .home-lens-slab:nth-child(6) { top: 71.4285%; background-color: #c9cbce; }
body.apple-theme .about-fluted-background .home-lens-slab:nth-child(7) { top: 85.7142%; background-color: #e7e8ea; }
@media (max-width: 699px) {
    body.apple-theme .about-fluted-background .home-lens-slab {
        height: calc(8.3333% - 2px);
        border-radius: 20px;
    }
    body.apple-theme .about-fluted-background .home-lens-slab:nth-child(1) { top: 0; }
    body.apple-theme .about-fluted-background .home-lens-slab:nth-child(2) { top: 8.3333%; }
    body.apple-theme .about-fluted-background .home-lens-slab:nth-child(3) { top: 16.6667%; }
    body.apple-theme .about-fluted-background .home-lens-slab:nth-child(4) { top: 25%; }
    body.apple-theme .about-fluted-background .home-lens-slab:nth-child(5) { top: 33.3333%; }
    body.apple-theme .about-fluted-background .home-lens-slab:nth-child(6) { top: 41.6667%; }
    body.apple-theme .about-fluted-background .home-lens-slab:nth-child(7) { top: 50%; }
    body.apple-theme .about-fluted-background .home-lens-slab:nth-child(8) { top: 58.3333%; background-color: #c7c9cc; }
    body.apple-theme .about-fluted-background .home-lens-slab:nth-child(9) { top: 66.6667%; background-color: #e7e8ea; }
    body.apple-theme .about-fluted-background .home-lens-slab:nth-child(10) { top: 75%; background-color: #d1d3d6; }
    body.apple-theme .about-fluted-background .home-lens-slab:nth-child(11) { top: 83.3333%; background-color: #e9eaec; }
    body.apple-theme .about-fluted-background .home-lens-slab:nth-child(12) { top: 91.6667%; background-color: #c9cbce; }}

/* ---- apple-theme ---- */

body.apple-theme #cam-bg {
    background-color: var(--ap-bg) !important;
    background-image: none !important;
    box-shadow:
        inset 34px 0 48px -42px rgba(22, 26, 31, 0.32),
        inset -34px 0 48px -42px rgba(22, 26, 31, 0.32),
        inset 0 26px 42px -38px rgba(22, 26, 31, 0.22),
        inset 0 -30px 48px -42px rgba(22, 26, 31, 0.28);
}
body.apple-theme #home-bg-logo {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Inter, system-ui, sans-serif !important;
    font-size: min(24vw, 280px);
    font-weight: 700;
    letter-spacing: 0;
    color: #8a8a8f;
    -webkit-text-stroke: 0;
    text-stroke: 0;
    filter: none;
}
body.apple-theme #home-bg-logo.visible,
body.apple-theme.plain-home-bg #home-bg-logo {
    opacity: 0.68;
}
body.apple-theme #home-bg-logo :is(.wm-single, .wm-line) {
    background: none;
    color: #8a8a8f;
    -webkit-text-fill-color: #8a8a8f;
    -webkit-text-stroke: 0;
    text-stroke: 0;
    text-shadow: none;
}
@media (min-width: 701px) {
    /* Glass-based watermark sizing applies to every cube face. */
    body.apple-theme #home-bg-logo {
        font-size: var(--home-logo-size, min(31vw, 48vh, 460px));
    }
    body.apple-theme #home-bg-logo :is(.wm-single, .wm-stacked) {
        white-space: nowrap;
        transform: translateY(var(--home-logo-shift, 0px)) scaleX(var(--home-logo-scale, 0.55));
        transform-origin: center;
    }
    body.apple-theme #home-bg-logo .wm-3dmodel :is(.wm-3d, .wm-model) {
        font-size: 1.02em;
    }
    body.apple-theme #home-bg-logo .wm-motiongraph .wm-line:first-child {
        font-size: 0.88em;
    }
    body.apple-theme #home-bg-logo .wm-motiongraph .wm-line:last-child {
        font-size: 1.07em;
    }
    body.apple-theme #home-bg-logo .wm-about .wm-line:last-child {
        font-size: 1.5em;
    }
    body.apple-theme #home-bg-logo .wm-contact .wm-line:first-child {
        font-size: 1.3em;
    }}

@media (min-width: 1001px) {
    body.apple-theme #home-bg-logo .wm-responsive-stacked { display: none; }}
@media (min-width: 701px) and (max-width: 1000px) {
    body.apple-theme #home-bg-logo .wm-responsive-single { display: none; }}
@media (max-width: 700px) {
    body.apple-theme #home-bg-logo {
        display: flex;
        font-size: var(--mobile-label-size, min(25vw, 19vh));
    }
    body.apple-theme #home-bg-logo .wm-single { display: none !important; }
    body.apple-theme #home-bg-logo .wm-stacked {
        display: flex !important;
        transform: translateY(var(--mobile-label-shift, 0px)) scaleY(var(--mobile-label-height-scale, 1));
    }
    body.apple-theme #home-bg-logo::after {
        content: none;
    }
    body.apple-theme #home-bg-logo.visible,
body.apple-theme.plain-home-bg #home-bg-logo { opacity: 1; }
    body.apple-theme #home-bg-logo .wm-stacked .wm-line {
        font-size: 1em !important;
        letter-spacing: 0;
        white-space: nowrap;
        color: #888c92;
        -webkit-text-fill-color: #888c92;
        line-height: 0.88;
        transform-origin: center;
    }
    body.apple-theme #home-bg-logo .wm-stacked .wm-line:first-child {
        transform: scaleX(var(--mobile-line-one-scale, 1)) !important;
    }
    body.apple-theme #home-bg-logo .wm-stacked .wm-line:last-child {
        transform: scaleX(var(--mobile-line-two-scale, 1)) !important;
    }}

/* Two raised background slabs. Their opposing rounded edges create the center seam. */
body.apple-theme #cam-bg {
    background-color: #f7f8f9 !important;
    background-image: none !important;
}
body.apple-theme #cam-bg::before,
body.apple-theme #cam-bg::after {
    display: block !important;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
    mix-blend-mode: normal;
}
body.apple-theme #cam-bg::before {
    z-index: 1;
    top: 0;
    bottom: calc(50% + 1px);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.44), transparent 24%),
        #e9eaec;
    border-radius: 3px 3px clamp(30px, 4vw, 56px) clamp(30px, 4vw, 56px);
    box-shadow:
        inset 0 -1px 0 rgba(255, 255, 255, 0.88),
        0 18px 28px -21px rgba(32, 36, 42, 0.62);
}
body.apple-theme #cam-bg::after {
    z-index: 0;
    top: calc(50% + 1px);
    bottom: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 22%),
        #d4d5d7;
    border-radius: clamp(30px, 4vw, 56px) clamp(30px, 4vw, 56px) 3px 3px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.72),
        inset 0 18px 25px -24px rgba(30, 34, 40, 0.52);
}

/* Three-slab variant. The spans replace the two pseudo-element panels. */
body.apple-theme #cam-bg::before,
body.apple-theme #cam-bg::after {
    display: none !important;
}
body.apple-theme #cam-bg .scene-slab {
    position: absolute;
    left: calc(clamp(28px, 3.7vw, 52px) * -1);
    right: calc(clamp(28px, 3.7vw, 52px) * -1);
    display: block;
    overflow: hidden;
    isolation: isolate;
    pointer-events: none;
}
body.apple-theme #cam-bg .scene-slab::before,
body.apple-theme #cam-bg .scene-slab::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}
/* Broad light in the middle and compressed shade at the edges make each
   full-width panel read as a gently convex glass surface. */
body.apple-theme #cam-bg .scene-slab::before {
    z-index: 1;
    background:
        radial-gradient(ellipse 72% 105% at 50% 48%,
            rgba(255, 255, 255, 0.42) 0%,
            rgba(255, 255, 255, 0.2) 43%,
            rgba(255, 255, 255, 0) 76%),
        linear-gradient(90deg,
            rgba(38, 43, 50, 0.1) 0%,
            transparent 12%,
            transparent 88%,
            rgba(38, 43, 50, 0.1) 100%);
    mix-blend-mode: soft-light;
}
body.apple-theme #cam-bg .scene-slab::after {
    z-index: 2;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.28) 0%,
        transparent 16%,
        transparent 76%,
        rgba(33, 37, 43, 0.12) 100%);
    box-shadow:
        inset 0 18px 24px -25px rgba(255, 255, 255, 0.95),
        inset 0 -20px 28px -25px rgba(28, 32, 38, 0.34),
        inset 22px 0 30px -30px rgba(31, 36, 42, 0.28),
        inset -22px 0 30px -30px rgba(31, 36, 42, 0.28);
}
body.apple-theme #cam-bg .scene-slab-top {
    top: 0;
    height: calc(33.333% - 1px);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.48), transparent 28%),
        #ececee;
    border-radius: 0 0 clamp(28px, 3.7vw, 52px) clamp(28px, 3.7vw, 52px);
    box-shadow:
        inset 0 -1px 0 rgba(255, 255, 255, 0.9),
        0 3px 5px -3px rgba(24, 28, 34, 0.34),
        0 20px 34px -22px rgba(32, 36, 42, 0.58);
    z-index: 3;
}
body.apple-theme #cam-bg .scene-slab-middle {
    top: calc(33.333% + 1px);
    height: calc(33.333% - 2px);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 30%),
        #dedfe1;
    border-radius: clamp(28px, 3.7vw, 52px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.78),
        inset 0 -1px 0 rgba(255, 255, 255, 0.7),
        0 3px 5px -3px rgba(24, 28, 34, 0.3),
        0 20px 34px -22px rgba(32, 36, 42, 0.5);
    z-index: 2;
}
body.apple-theme #cam-bg .scene-slab-bottom {
    top: calc(66.666% + 1px);
    bottom: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 28%),
        #d1d2d4;
    border-radius: clamp(28px, 3.7vw, 52px) clamp(28px, 3.7vw, 52px) 0 0;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.68),
        inset 0 17px 24px -23px rgba(30, 34, 40, 0.42),
        0 -3px 6px -4px rgba(24, 28, 34, 0.3);
    z-index: 1;
}
body.apple-theme #cam-bg :is(.scene-slab-mobile-four, .scene-slab-mobile-five) {
    display: none;
}
body.apple-theme .square-bullet {
    border-radius: 50%;
    background: var(--ap-blue);
    box-shadow: none;
}
@media (max-width: 700px) {

    /* Five evenly stacked mobile slabs create denser depth on tall screens. */
    body.apple-theme #cam-bg .scene-slab {
        left: -24px;
        right: -24px;
    }
    body.apple-theme #cam-bg .scene-slab-top {
        height: calc(20% - 1px);
        border-radius: 0 0 24px 24px;
        background: linear-gradient(180deg, rgba(255,255,255,.58), transparent 30%), #eeeeF0;
        box-shadow: inset 0 -1px 0 rgba(255,255,255,.98), 0 3px 5px -3px rgba(24,28,34,.36), 0 18px 30px -19px rgba(28,32,38,.68);
        z-index: 5;
    }
    body.apple-theme #cam-bg .scene-slab-middle {
        top: calc(20% + 1px);
        height: calc(20% - 2px);
        border-radius: 24px;
        background: linear-gradient(180deg, rgba(255,255,255,.38), transparent 30%), #e5e5e7;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(255,255,255,.78), 0 3px 5px -3px rgba(24,28,34,.32), 0 18px 30px -19px rgba(28,32,38,.62);
        z-index: 4;
    }
    body.apple-theme #cam-bg .scene-slab-bottom {
        top: calc(40% + 1px);
        bottom: auto;
        height: calc(20% - 2px);
        border-radius: 24px;
        background: linear-gradient(180deg, rgba(255,255,255,.3), transparent 30%), #dedfe1;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.84), inset 0 -1px 0 rgba(255,255,255,.72), 0 3px 5px -3px rgba(24,28,34,.3), 0 18px 30px -19px rgba(28,32,38,.58);
        z-index: 3;
    }
    body.apple-theme #cam-bg .scene-slab-mobile-four,
body.apple-theme #cam-bg .scene-slab-mobile-five {
        display: block;
    }
    body.apple-theme #cam-bg .scene-slab-mobile-four {
        top: calc(60% + 1px);
        height: calc(20% - 2px);
        border-radius: 24px;
        background: linear-gradient(180deg, rgba(255,255,255,.25), transparent 30%), #d7d8da;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 0 -1px 0 rgba(255,255,255,.7), 0 3px 5px -3px rgba(24,28,34,.28), 0 18px 30px -19px rgba(28,32,38,.54);
        z-index: 2;
    }
    body.apple-theme #cam-bg .scene-slab-mobile-five {
        top: calc(80% + 1px);
        bottom: 0;
        border-radius: 24px 24px 0 0;
        background: linear-gradient(180deg, rgba(255,255,255,.2), transparent 28%), #d1d2d4;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.76), inset 0 16px 24px -21px rgba(30,34,40,.48), 0 -3px 6px -4px rgba(24,28,34,.28);
        z-index: 1;
    }
    body.apple-theme #cam-bg .scene-slab::before {
        background:
            radial-gradient(ellipse 92% 86% at 50% 48%, rgba(255,255,255,.52), rgba(255,255,255,.23) 45%, transparent 78%),
            linear-gradient(90deg, rgba(38,43,50,.12), transparent 9%, transparent 91%, rgba(38,43,50,.12));
    }
    body.apple-theme #cam-bg .scene-slab::after {
        box-shadow:
            inset 0 14px 20px -22px rgba(255,255,255,.95),
            inset 0 -16px 24px -22px rgba(28,32,38,.42),
            inset 14px 0 22px -24px rgba(31,36,42,.3),
            inset -14px 0 22px -24px rgba(31,36,42,.3);
    }}
body.apple-theme .page-panel[data-page="HOME"] { background: var(--ap-bg); color: var(--ap-text); }

/* Desktop home glass: a dedicated backdrop for the cube, with its own organic ink edge. */
body.apple-theme #home-liquid-frame {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    filter: none;
    transition: opacity 500ms ease;
}
body.apple-theme.experience-live #home-liquid-frame,
body.apple-theme.plain-home-bg #home-liquid-frame { opacity: 1; }
body.apple-theme.page-panel-open #home-liquid-frame { opacity: 0; }
body.apple-theme #home-liquid-frame svg {
    position: absolute;
    z-index: 4;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}
body.apple-theme .home-liquid-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
/* Magnified backdrop copy clipped by the same custom path as the glass. */
body.apple-theme .home-liquid-lens { z-index: 0; }
body.apple-theme .home-lens-scene {
    position: absolute;
    inset: 0;
    overflow: hidden;
    transform: scale(1.035);
    transform-origin: 50% 50%;
    filter: contrast(1.08) saturate(1.04) brightness(1.025);
}
body.apple-theme .home-lens-slab {
    position: absolute;
    left: calc(clamp(28px, 3.7vw, 52px) * -1);
    right: calc(clamp(28px, 3.7vw, 52px) * -1);
    display: block;
    overflow: hidden;
}
body.apple-theme :is(.home-lens-slab-mobile-four, .home-lens-slab-mobile-five) {
    display: none;
}
body.apple-theme .home-lens-slab::before,
body.apple-theme .home-lens-slab::after {
    content: "";
    position: absolute;
    inset: 0;
}
body.apple-theme .home-lens-slab::before {
    background:
        radial-gradient(ellipse 72% 105% at 50% 48%, rgba(255,255,255,.5), rgba(255,255,255,.23) 43%, transparent 76%),
        linear-gradient(90deg, rgba(38,43,50,.12), transparent 12%, transparent 88%, rgba(38,43,50,.12));
    mix-blend-mode: soft-light;
}
body.apple-theme .home-lens-slab::after {
    background: linear-gradient(180deg, rgba(255,255,255,.34), transparent 16%, transparent 76%, rgba(33,37,43,.14));
    box-shadow:
        inset 0 18px 24px -25px rgba(255,255,255,.98),
        inset 0 -20px 28px -25px rgba(28,32,38,.4),
        inset 22px 0 30px -30px rgba(31,36,42,.32),
        inset -22px 0 30px -30px rgba(31,36,42,.32);
}
body.apple-theme .home-lens-slab-top {
    top: 0;
    height: calc(33.333% - 1px);
    border-radius: 0 0 clamp(28px, 3.7vw, 52px) clamp(28px, 3.7vw, 52px);
    background: linear-gradient(180deg, rgba(255,255,255,.48), transparent 28%), #ececee;
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.95), 0 17px 27px -20px rgba(32,36,42,.68);
    z-index: 3;
}
body.apple-theme .home-lens-slab-middle {
    top: calc(33.333% + 1px);
    height: calc(33.333% - 2px);
    border-radius: clamp(28px, 3.7vw, 52px);
    background: linear-gradient(180deg, rgba(255,255,255,.16), transparent 30%), #b8bbbf;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.84), inset 0 -1px 0 rgba(255,255,255,.76), 0 17px 27px -20px rgba(32,36,42,.6);
    z-index: 2;
}
body.apple-theme .home-lens-slab-bottom {
    top: calc(66.666% + 1px);
    bottom: 0;
    border-radius: clamp(28px, 3.7vw, 52px) clamp(28px, 3.7vw, 52px) 0 0;
    background: linear-gradient(180deg, rgba(255,255,255,.17), transparent 28%), #d1d2d4;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.76), inset 0 17px 24px -23px rgba(30,34,40,.5);
    z-index: 1;
}
@media (min-width: 701px) {
    body.apple-theme .home-lens-slab-top {
        background: linear-gradient(180deg, #c1c3c6 0%, #f5f5f6 52%, #fff 100%);
    }
    body.apple-theme .home-lens-slab-bottom {
        background: linear-gradient(180deg, #fff 0%, #f5f5f6 48%, #c1c3c6 100%);
    }}
body.apple-theme .home-liquid-effect {
    z-index: 1;
    background: rgba(255, 255, 255, 0.012);
    backdrop-filter: blur(1.1px) saturate(126%) brightness(1.045);
    -webkit-backdrop-filter: blur(1.1px) saturate(126%) brightness(1.045);
    filter: none;
}
body.apple-theme .home-liquid-tint {
    z-index: 2;
    background:
        radial-gradient(90% 70% at 50% 35%, rgba(255, 255, 255, 0.08), transparent 70%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(225, 225, 230, 0.012));
}
body.apple-theme .home-liquid-shine {
    z-index: 3;
    background:
        radial-gradient(ellipse 88% 36% at 48% 4%, rgba(255,255,255,.2), transparent 76%),
        linear-gradient(90deg, transparent 39%, rgba(255, 255, 255, 0.55) 46%, rgba(255, 255, 255, 0.72) 50%, rgba(255, 255, 255, 0.55) 54%, transparent 61%) center calc(100% - 7px) / 100% 7px no-repeat,
        linear-gradient(90deg, rgba(255, 255, 255, 0.12), transparent 15%, transparent 85%, rgba(255, 255, 255, 0.12));
}
body.apple-theme .home-liquid-glare {
    z-index: 3;
    --lx: 50%;
    --ly: 25%;
    mix-blend-mode: normal;
    background:
        radial-gradient(ellipse 420px 220px at var(--lx) var(--ly),
            rgba(255, 255, 255, 0.85) 0%,
            rgba(255, 255, 255, 0.35) 35%,
            transparent 72%),
        radial-gradient(ellipse 120% 120% at var(--lx) var(--ly),
            transparent 30%,
            rgba(40, 46, 56, 0.14) 100%);
}
body.apple-theme .home-liquid-glare::before {
    content: "";
    position: absolute;
    top: -20%;
    bottom: -20%;
    right: 8%;
    width: 16%;
    transform: skewX(-18deg);
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(30, 36, 46, 0.1) 25%,
        rgba(255, 255, 255, 0.95) 48%,
        rgba(255, 255, 255, 0.95) 52%,
        rgba(30, 36, 46, 0.1) 75%,
        transparent 100%);
    filter: blur(2px);
}
@media (max-width: 500px) {
    body.apple-theme .home-liquid-glare { display: none; }}
@media (min-width: 701px) {
    body.apple-theme .home-lens-scene {
        transform: scale(1.055);
        filter: contrast(1.12) saturate(1.06) brightness(1.035);
    }
    body.apple-theme .home-liquid-effect {
        backdrop-filter: blur(0.45px) saturate(124%) brightness(1.035) contrast(1.05);
        -webkit-backdrop-filter: blur(0.45px) saturate(124%) brightness(1.035) contrast(1.05);
    }
    body.apple-theme .home-liquid-tint {
        background:
            radial-gradient(ellipse 68% 74% at 50% 46%, rgba(255,255,255,.18) 0%, rgba(255,255,255,.08) 46%, transparent 72%),
            radial-gradient(ellipse 82% 88% at 50% 48%, transparent 56%, rgba(42,48,56,.055) 84%, rgba(30,35,42,.1) 100%),
            linear-gradient(180deg, rgba(255,255,255,.075), rgba(225,225,230,.025));
    }
    body.apple-theme .home-liquid-shine {
        background:
            radial-gradient(ellipse 88% 36% at 48% 4%, rgba(255,255,255,.22), transparent 76%),
            radial-gradient(ellipse 58% 62% at 50% 42%, rgba(255,255,255,.2), rgba(255,255,255,.055) 52%, transparent 74%),
            linear-gradient(90deg, transparent 39%, rgba(255,255,255,.62) 46%, rgba(255,255,255,.82) 50%, rgba(255,255,255,.62) 54%, transparent 61%) center calc(100% - 7px) / 100% 7px no-repeat,
            linear-gradient(90deg, rgba(255,255,255,.2), transparent 13%, transparent 87%, rgba(255,255,255,.2));
    }}
body.apple-theme .home-liquid-shadow {
    fill: none;
    stroke: rgba(30, 32, 36, 0.4);
    stroke-width: 19;
    filter: url(#home-liquid-blur);
}
/* Source alpha gives the inset bevel the exact notch and corner geometry. */
body.apple-theme .home-liquid-panel {
    fill: url(#home-bulge-fill);
    filter: url(#home-glass-rim);
}
body.apple-theme .home-liquid-highlight {
    fill: none;
    stroke: rgba(255, 255, 255, 0.94);
    stroke-width: 2;
    filter:
        drop-shadow(1px -1px 1px rgba(255, 255, 255, 0.9))
        drop-shadow(-1px 1px 1px rgba(255, 255, 255, 0.72))
        drop-shadow(-5px 0 4px rgba(255, 255, 255, 0.2))
        drop-shadow(5px 0 4px rgba(255, 255, 255, 0.18))
        drop-shadow(0 9px 9px rgba(30, 32, 36, 0.28));
    vector-effect: non-scaling-stroke;
}
body.apple-theme .home-liquid-side-glow,
body.apple-theme .home-liquid-side-glint {
    fill: none;
    stroke: url(#home-side-reflection);
    vector-effect: non-scaling-stroke;
}
body.apple-theme .home-liquid-side-glow {
    stroke-width: 15;
    opacity: 0.58;
    filter: url(#home-side-reflection-blur);
}
body.apple-theme .home-liquid-side-glint {
    stroke-width: 3;
    opacity: 0.9;
}
body.apple-theme .home-liquid-outline {
    fill: none;
    stroke: rgba(12, 15, 17, 0.62);
    stroke-width: 0.85;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

@media (max-width: 700px) {
    body.apple-theme #home-liquid-frame {
        display: block;
    }
    body.apple-theme #home-liquid-frame svg {
        display: none;
    }
    body.apple-theme #home-liquid-frame::after {
        content: "";
        position: absolute;
        z-index: 5;
        top: max(12px, env(safe-area-inset-top));
        right: 12px;
        bottom: max(82px, calc(env(safe-area-inset-bottom) + 72px));
        left: 12px;
        border: 0.8px solid rgba(13, 16, 19, 0.68);
        border-radius: 36px;
        box-shadow:
            inset 1px 1px 1px rgba(255, 255, 255, 0.92),
            inset -2px -2px 3px rgba(43, 48, 55, 0.25),
            inset 0 18px 24px -24px rgba(255, 255, 255, 0.9),
            inset 0 -22px 30px -24px rgba(36, 41, 48, 0.38),
            0 15px 28px -17px rgba(24, 28, 34, 0.42);
        pointer-events: none;
    }
    body.apple-theme #home-liquid-frame .home-liquid-layer {
        -webkit-clip-path: inset(max(12px, env(safe-area-inset-top)) 12px max(82px, calc(env(safe-area-inset-bottom) + 72px)) 12px round 36px);
        clip-path: inset(max(12px, env(safe-area-inset-top)) 12px max(82px, calc(env(safe-area-inset-bottom) + 72px)) 12px round 36px);
    }
    body.apple-theme .home-lens-scene {
        transform: scale(1.045);
    }
    body.apple-theme .home-lens-slab {
        left: -24px;
        right: -24px;
    }
    body.apple-theme .home-lens-slab-top {
        height: calc(20% - 1px);
        border-radius: 0 0 24px 24px;
        z-index: 5;
    }
    body.apple-theme .home-lens-slab-middle {
        top: calc(20% + 1px);
        height: calc(20% - 2px);
        border-radius: 24px;
        background: linear-gradient(180deg, rgba(255,255,255,.32), transparent 30%), #e5e5e7;
        z-index: 4;
    }
    body.apple-theme .home-lens-slab-bottom {
        top: calc(40% + 1px);
        bottom: auto;
        height: calc(20% - 2px);
        border-radius: 24px;
        background: linear-gradient(180deg, rgba(255,255,255,.24), transparent 30%), #dedfe1;
        z-index: 3;
    }
    body.apple-theme :is(.home-lens-slab-mobile-four, .home-lens-slab-mobile-five) {
        display: block;
    }
    body.apple-theme .home-lens-slab-mobile-four {
        top: calc(60% + 1px);
        height: calc(20% - 2px);
        border-radius: 24px;
        background: linear-gradient(180deg, rgba(255,255,255,.2), transparent 30%), #d7d8da;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.78), inset 0 -1px 0 rgba(255,255,255,.7), 0 15px 24px -19px rgba(32,36,42,.56);
        z-index: 2;
    }
    body.apple-theme .home-lens-slab-mobile-five {
        top: calc(80% + 1px);
        bottom: 0;
        border-radius: 24px 24px 0 0;
        background: linear-gradient(180deg, rgba(255,255,255,.16), transparent 28%), #d1d2d4;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.72), inset 0 15px 22px -21px rgba(30,34,40,.46);
        z-index: 1;
    }
    body.apple-theme .home-liquid-effect {
        backdrop-filter: blur(0.45px) saturate(118%) brightness(1.025);
        -webkit-backdrop-filter: blur(0.45px) saturate(118%) brightness(1.025);
    }
    body.apple-theme .home-liquid-tint {
        background:
            radial-gradient(90% 72% at 50% 38%, rgba(255,255,255,.1), transparent 72%),
            linear-gradient(180deg, rgba(255,255,255,.04), rgba(225,225,230,.018));
    }}
/* Mid-size screens use one continuous rounded-square glass field below the separate nav. */
@media (min-width: 701px) and (max-width: 1229px) {
    body.apple-theme #home-liquid-frame { display: block !important; }
    body.apple-theme #home-liquid-frame svg { display: block !important; }
    body.apple-theme #home-liquid-frame::after { display: none !important; }}

/* Keep the small-phone glass field clear of the bottom navigation.
   --home-nav-gap = puwang sa pagitan ng malaking liquid glass at ng nav bar.
   Dagdagan para lumaki ang gap, bawasan para lumiit. */
@media (max-width: 500px) {
    body.apple-theme #home-liquid-frame { display: block !important; }
    body.apple-theme #home-liquid-frame::after {
        bottom: var(--home-glass-bottom);
    }
    body.apple-theme #home-liquid-frame .home-liquid-layer {
        -webkit-clip-path: inset(max(12px, env(safe-area-inset-top)) 12px var(--home-glass-bottom) 12px round 36px);
        clip-path: inset(max(12px, env(safe-area-inset-top)) 12px var(--home-glass-bottom) 12px round 36px);
    }}

/* Match the 501-700px outline to the glass bounds drawn by home-frame.js. */
@media (min-width: 501px) and (max-width: 700px) {
    body.apple-theme #home-liquid-frame::after {
        bottom: calc(100dvh - var(--home-panel-bottom, calc(100dvh - 82px)));
    }}

/* =====================================================================
   HOME GLASS → SLIGHT CONVEX MIRROR (desktop only)
   Walang geometry/JS na ginalaw. Lighting lang ang pinalitan para
   magmukhang bahagyang umbok ang salamin:
   1) edge falloff  2) dome light  3) malapad na window reflection
   Para i-undo: burahin ang buong block na ito.
   ===================================================================== */
@media (min-width: 701px) {
    /* mas mahinang flat zoom, para hindi mukhang naka-magnify na papel */
    body.apple-theme .home-lens-scene {
        transform: scale(1.03);
        filter: contrast(1.06) saturate(1.04) brightness(1.03);
    }
    body.apple-theme .home-liquid-tint {
        background:
            /* 1) edge falloff: umiikot palayo yung surface sa gilid */
            radial-gradient(ellipse 80% 88% at 50% 48%,
                transparent 52%, rgba(52,62,76,.07) 74%, rgba(28,34,44,.20) 100%),
            /* 2) dome light: pinakamaliwanag sa gitna, bahagyang pa-upper-left */
            radial-gradient(ellipse 62% 70% at 44% 40%,
                rgba(255,255,255,.22), rgba(255,255,255,.07) 55%, transparent 78%),
            linear-gradient(180deg, rgba(255,255,255,.06), rgba(210,216,224,.03));
    }
    body.apple-theme .home-liquid-shine {
        background:
            /* 3) malapad at malambot na window reflection (upper-left) */
            radial-gradient(ellipse 34% 22% at 27% 21%,
                rgba(255,255,255,.2), rgba(255,255,255,.06) 55%, transparent 100%),
            /* mahinang kontra-reflection (lower-right) */
            radial-gradient(ellipse 26% 16% at 78% 82%,
                rgba(255,255,255,.14), transparent 100%),
            /* existing: bottom center gloss strip */
            linear-gradient(90deg, transparent 39%, rgba(255,255,255,.62) 46%,
                rgba(255,255,255,.82) 50%, rgba(255,255,255,.62) 54%, transparent 61%)
                center calc(100% - 7px) / 100% 7px no-repeat,
            /* existing: side gloss */
            linear-gradient(90deg, rgba(255,255,255,.2), transparent 13%,
                transparent 87%, rgba(255,255,255,.2));
    }}

/* Keep the liquid surface while drawing its perimeter as a plain black line. */
body.apple-theme #home-liquid-frame svg :is(
    .home-liquid-shadow,
    .home-liquid-highlight,
    .home-liquid-side-glow,
    .home-liquid-side-glint
) {
    display: none;
}
body.apple-theme #home-liquid-frame .home-liquid-panel {
    filter: none;
}

body.apple-theme #home-liquid-frame .home-liquid-outline {
    stroke: #111;
    stroke-width: 1.25;
    filter: none;
}
@media (max-width: 500px) {
    body.apple-theme #home-liquid-frame::after {
        border: 1.25px solid #111;
        background: none;
        box-shadow: none;
    }}

/* ---- section-flow ---- */

/* Initial HOME readiness screen; same thin rounded track as the cube guide. */
body.apple-theme :is(#home-loader, #section-loader) {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 20px;
    background: #fff;
    opacity: 1;
    transition: opacity 320ms ease;
}
body.apple-theme #home-loader.is-finished { opacity: 0; pointer-events: none; }
body.apple-theme .home-loader-bar {
    --load-progress: .05;
    width: min(300px, calc(100vw - 80px));
    height: 3px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(5, 5, 5, .13);
}
body.apple-theme .home-loader-bar span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: #050505;
    transform: scaleX(var(--load-progress));
    transform-origin: left center;
    transition: transform 180ms ease;
}
body.apple-theme .home-loader-message { margin: 0; color: #555; font-size: 13px; text-align: center; }
body.apple-theme .home-loader-continue { padding: 8px 18px; border: 1px solid #ccc; border-radius: 999px; background: #fff; color: #111; cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
    body.apple-theme #home-loader,
    body.apple-theme .home-loader-bar span { transition: none; }
}

body.apple-theme #page-panels > .page-panel[data-page="HOME"] { display: none !important; }