/* Young Creator Lab: small layer of CSS that Tailwind utilities don't cover. */

html { -webkit-text-size-adjust: 100%; }
body { text-rendering: optimizeLegibility; }

/* Before GSAP takes over, hide hero pieces so they don't flash in their final position.
   The head script removes .motion if GSAP fails to load, so content is never stuck hidden. */
.motion [data-hero],
.motion [data-hero-media],
.motion .word { visibility: hidden; }

/* Word masks for the hero headline reveal */
.word-mask { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 0.08em 0.12em 0; margin: 0 -0.08em -0.12em 0; }
.word { display: inline-block; will-change: transform; }

/* Keyboard focus: a clear ring in brand ink (gold on dark grounds) */
:focus { outline: none; }
:focus-visible { outline: 2px solid #14161C; outline-offset: 3px; border-radius: 6px; }
.bg-ink :focus-visible, .on-dark :focus-visible { outline-color: #B8975A; }

.skip-link { position: absolute; left: 16px; top: -100px; z-index: 100; background: #14161C; color: #F6F2EA; padding: 12px 20px; border-radius: 999px; font-weight: 700; }
.skip-link:focus { top: 16px; }

/* FAQ disclosure: custom +/– marker */
.faq summary { list-style: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .faq-icon { position: relative; flex: 0 0 18px; height: 18px; margin-top: 6px; }
.faq summary .faq-icon::before,
.faq summary .faq-icon::after { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .3s ease; }
.faq summary .faq-icon::after { transform: rotate(90deg); }
.faq[open] summary .faq-icon::after { transform: rotate(0deg); }
.faq-answer { overflow: hidden; }

.is-error { color: #B42318; }

/* Form controls shared by the application and waitlist forms */
.field { min-height: 48px; width: 100%; padding: 0 14px; border: 1.5px solid #8C877C; border-radius: 12px; background: #FFFFFF; font: inherit; color: #14161C; transition: border-color .2s, box-shadow .2s; }
textarea.field { padding: 12px 14px; resize: vertical; min-height: 120px; }
select.field { padding: 0 40px 0 12px; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2314161C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.field:focus { border-color: #14161C; box-shadow: 0 0 0 3px rgba(184, 151, 90, .35); outline: none; }
.field[aria-invalid="true"] { border-color: #B42318; }
.field-error { margin-top: 6px; font-size: 15px; font-weight: 600; color: #B42318; }

.chip input:disabled + span { opacity: .45; }
.chip:has(input:disabled) { cursor: not-allowed; opacity: .55; }

/* Application progress: a bar per step that fills ink (done) or gold (current) */
.step-seg { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.step-seg__bar { display: block; height: 3px; border-radius: 999px; background: #E5E1D8; overflow: hidden; }
.step-seg__bar > span { display: block; height: 100%; background: #14161C; transform: scaleX(0); transform-origin: left; transition: transform .7s cubic-bezier(.16, 1, .3, 1), background-color .3s ease; }
.step-seg.is-done .step-seg__bar > span,
.step-seg.is-current .step-seg__bar > span { transform: scaleX(1); }
.step-seg.is-current:not(.is-done) .step-seg__bar > span { background: #B8975A; }
.step-seg__num { display: inline-flex; flex: 0 0 26px; height: 26px; align-items: center; justify-content: center; border: 1.5px solid #8C877C; border-radius: 999px; font-size: 13px; font-weight: 700; color: #5E5E59; transition: background-color .3s ease, border-color .3s ease, color .3s ease; }
.step-seg__check { display: none; }
.step-seg.is-current .step-seg__num { border-color: #14161C; color: #14161C; }
.step-seg.is-done .step-seg__num { border-color: #14161C; background: #14161C; color: #F6F2EA; }
.step-seg.is-done .step-seg__n { display: none; }
.step-seg.is-done .step-seg__check { display: block; }
.step-seg__label { font-size: 13px; font-weight: 600; line-height: 1.25; color: #5E5E59; }
.step-seg.is-current .step-seg__label { font-weight: 800; color: #14161C; }
@media (max-width: 639px) {
    .step-seg__num { display: none; }
    .step-seg:not(.is-current) .step-seg__label { font-size: 12px; }
}
@media (min-width: 640px) { .step-seg__label { font-size: 15px; } }

/* Cards in the apply and payment flow */
.form-card { position: relative; display: flex; flex-direction: column; gap: 28px; border-radius: 28px; background: #FFFFFF; padding: clamp(24px, 4vw, 44px); box-shadow: 0 0 0 1px rgba(207, 199, 184, .55), 0 40px 70px -50px rgba(20, 22, 28, .45); }
.form-card__num { font-family: "Playfair Display", Georgia, serif; font-size: 44px; font-weight: 600; line-height: 1; color: #B8975A; }

/* "Read the questions first" tiles */
.doc-tile { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1.5px solid #E5E1D8; border-radius: 16px; background: #F6F2EA; color: #14161C; text-decoration: none; transition: border-color .3s ease, background-color .3s ease; }
.doc-tile:hover { border-color: #B8975A; background: #FFFFFF; }

/* Vertical timeline (application received, payment confirmed) */
.timeline { position: relative; margin: 0; padding: 0; list-style: none; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 1.5px; background: #3A3B40; }
.timeline > li { position: relative; padding-left: 36px; }
.timeline > li::before { content: ""; position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border-radius: 999px; border: 1.5px solid #B8975A; background: #14161C; }
.timeline > li.is-done::before { background: #B8975A; box-shadow: 0 0 0 5px rgba(184, 151, 90, .2); }

/* ------------------------------------------------------------------ *
 * Hover interactions. Only on devices that really hover, and only when
 * the visitor hasn't asked for reduced motion.
 * ------------------------------------------------------------------ */
.btn-fx { position: relative; overflow: hidden; isolation: isolate; --fx: #B8975A; --fx-text: #14161C; }
.btn-fx::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; background: var(--fx); transform: translateY(102%); }
.btn-fx-ink { --fx: #14161C; --fx-text: #F6F2EA; }
.link-line { background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1.5px; padding-bottom: 3px; }
.link-line[aria-current] { background-size: 100% 1.5px; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    /* Buttons: a champagne-gold fill rises from below; text flips to ink for contrast */
    .btn-fx { transition: color .45s cubic-bezier(.16, 1, .3, 1), border-color .45s, box-shadow .45s; }
    .btn-fx::before { transition: transform .55s cubic-bezier(.16, 1, .3, 1); }
    html .btn-fx:hover { color: var(--fx-text); box-shadow: 0 14px 28px -16px rgba(20, 22, 28, .55); }
    .btn-fx:hover::before { transform: translateY(0); }
    .btn-fx:disabled::before { transform: translateY(102%); }

    /* Text links: underline draws in from the left */
    .link-line { transition: background-size .45s cubic-bezier(.16, 1, .3, 1); }
    .link-line:hover { background-size: 100% 1.5px; }

    /* Photos: slow, gentle zoom inside their frame */
    .zoom-img { transition: transform 1.2s cubic-bezier(.16, 1, .3, 1), filter .8s ease; will-change: transform; }
    .img-frame:hover .zoom-img, .group:hover .zoom-img { transform: scale(1.07); }

    /* Cards lift */
    .hover-lift { transition: transform .55s cubic-bezier(.16, 1, .3, 1), box-shadow .55s ease, border-color .35s ease, background-color .35s ease; }
    .hover-lift:hover { transform: translateY(-6px); box-shadow: 0 26px 44px -28px rgba(20, 22, 28, .45); }
    .step-card:hover { background-color: #FFFFFF; }
    .step-num { display: inline-block; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), color .35s ease; }
    .step-card:hover .step-num { transform: translateX(6px); color: #14161C; }

    /* "What children learn": a gold rule sweeps across the ink rule, arrow nudges */
    .learn-rule::before { content: ""; position: absolute; left: 0; top: -2px; width: 100%; height: 2px; background: #B8975A; transform: scaleX(0); transform-origin: left; transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
    .group:hover .learn-rule::before { transform: scaleX(1); }
    .nudge { opacity: 0; transform: translateX(-8px); transition: opacity .35s ease, transform .45s cubic-bezier(.16, 1, .3, 1); }
    .group:hover .nudge { opacity: 1; transform: translateX(0); }

    /* Icons pop */
    .icon-pop svg { transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
    .icon-pop:hover svg { transform: scale(1.18) rotate(-8deg); }

    /* Schedule rows: time turns gold and steps in */
    .slot-time { display: inline-block; transition: color .3s ease, transform .4s cubic-bezier(.16, 1, .3, 1); }
    .slot:hover .slot-time { color: #B8975A; transform: translateX(4px); }

    /* FAQ */
    .faq summary { transition: color .25s ease; }
    .faq summary:hover { color: #5E5E59; }
    .faq summary .faq-icon { transition: transform .4s cubic-bezier(.34, 1.56, .64, 1); }
    .faq summary:hover .faq-icon { transform: rotate(90deg); }

    /* Logo: the On-Air dot pulses */
    .logo-link:hover [data-rec-dot] { animation: rec-pulse 1s ease-in-out infinite; }

    /* Mobile menu links slide */
    .menu-link { transition: padding-left .4s cubic-bezier(.16, 1, .3, 1), color .3s ease; }
    .menu-link:hover { padding-left: 10px; color: #B8975A; }
    .menu-btn { transition: background-color .3s ease, color .3s ease; }
    .menu-btn:hover { background: #14161C; color: #F6F2EA; }

    /* Form chips */
    .chip { transition: border-color .25s ease, background-color .25s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1); }
    .chip:hover:not(:has(input:disabled)) { border-color: #14161C; transform: translateY(-2px); }
}

@keyframes rec-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.6); opacity: .55; }
}

/* 3D tilt container for the hero photo (driven by GSAP) */
[data-tilt] { transform-style: preserve-3d; }

/* ------------------------------------------------------------------ *
 * Fixed header: frosted once scrolled, tucked away while scrolling down
 * ------------------------------------------------------------------ */
.header-spacer { height: 88px; }
.site-header { transition: transform .5s cubic-bezier(.16, 1, .3, 1), background-color .35s ease, box-shadow .35s ease; }
.site-header__inner { padding-top: 22px; padding-bottom: 22px; transition: padding .35s ease; }
.site-header.is-scrolled {
    background: rgba(246, 242, 234, .84);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    backdrop-filter: blur(16px) saturate(1.4);
    box-shadow: 0 1px 0 rgba(20, 22, 28, .07), 0 14px 34px -26px rgba(20, 22, 28, .45);
}
.site-header.is-scrolled .site-header__inner { padding-top: 12px; padding-bottom: 12px; }
.site-header.is-hidden { transform: translateY(-100%); }

/* Gold reading-progress line */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 70; height: 2px; background: #B8975A; transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }

/* Soft colour glows behind sections (parent needs `isolate`) */
.glow { position: absolute; z-index: -1; border-radius: 9999px; pointer-events: none; }
.glow--gold { background: radial-gradient(closest-side, rgba(184, 151, 90, .30), rgba(184, 151, 90, 0)); }
.glow--sand { background: radial-gradient(closest-side, rgba(225, 214, 194, .75), rgba(225, 214, 194, 0)); }

/* Fine film grain over the whole page for a printed, premium feel */
body::after {
    content: ""; position: fixed; inset: 0; z-index: 80; pointer-events: none; opacity: .05; mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Hero: gold underline draws under the last word */
.hero-underline { background-image: linear-gradient(#B8975A, #B8975A); background-repeat: no-repeat; background-position: 0 94%; background-size: 100% .07em; }

/* Ticker */
.marquee { overflow: hidden; }
.marquee__track { display: flex; width: max-content; animation: marquee 42s linear infinite; }
.marquee__group { display: flex; flex-shrink: 0; margin: 0; padding: 0; list-style: none; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Sound-wave bars */
.wave { display: flex; align-items: center; gap: 3px; }
.wave > span { flex: 1 1 0; min-width: 2px; height: var(--h); border-radius: 999px; transform-origin: center; animation: wave 1.3s ease-in-out var(--d) infinite alternate; }
@keyframes wave { from { transform: scaleY(.3); } to { transform: scaleY(1); } }

/* Broadcast rings on the enrolment card */
.broadcast { position: absolute; z-index: 0; width: 560px; height: 560px; pointer-events: none; }
.broadcast > span { position: absolute; inset: 0; border: 1.5px solid rgba(184, 151, 90, .4); border-radius: 50%; opacity: 0; animation: ripple 7s cubic-bezier(.2, .6, .3, 1) infinite; }
.broadcast > span:nth-child(2) { animation-delay: 1.75s; }
.broadcast > span:nth-child(3) { animation-delay: 3.5s; }
.broadcast > span:nth-child(4) { animation-delay: 5.25s; }
@keyframes ripple { 0% { transform: scale(.15); opacity: 0; } 12% { opacity: 1; } 100% { transform: scale(1); opacity: 0; } }

/* Small hover details */
.arrow { display: inline-block; transition: transform .45s cubic-bezier(.16, 1, .3, 1); }
a:hover > .arrow { transform: translateX(5px); }
.circle-link { transition: background-color .35s ease, color .35s ease; }
.circle-link svg { transition: transform .45s cubic-bezier(.16, 1, .3, 1); }
.group:hover .circle-link, .circle-link:hover { background: #14161C; color: #F6F2EA; }
.group:hover .circle-link svg { transform: rotate(45deg); }
.step-icon { transition: background-color .35s ease, color .35s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.step-card:hover .step-icon { background: #14161C; color: #F6F2EA; transform: rotate(-8deg) scale(1.06); }

@media (prefers-reduced-motion: reduce) {
    .marquee__track, .wave > span { animation: none !important; }
    .broadcast > span { animation: none !important; opacity: .5; }
    .broadcast > span:nth-child(1) { transform: scale(.35); }
    .broadcast > span:nth-child(2) { transform: scale(.55); }
    .broadcast > span:nth-child(3) { transform: scale(.75); }
    .site-header { transition: none; }
}

/* Smooth-scroll wrapper (GSAP ScrollSmoother). `clip` hides sideways overflow without creating a scroll container. */
#smooth-wrapper { overflow-x: clip; }

/* Mobile menu starts closed even before JS runs */
#mobile-menu:not(.is-open) { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

@media print {
    header, footer, #mobile-menu, .no-print { display: none !important; }
    body { background: #fff; }
    #smooth-wrapper, #smooth-content { position: static !important; transform: none !important; overflow: visible !important; height: auto !important; }
}