/*
 * CampOffice website: the looks (html[data-look], App\Support\SiteLook) and their motion (html.lm, set by site/motion
 * only when the browser allows motion and the look moves; public/js/site-motion.js). Builds on site.css and
 * site-pages.css: same markup, same words. Hand-written, no build step.
 *
 * Motion rules: opacity and transform only; a part reveals once; nothing scrubs with the scroll; every entrance fills
 * `backwards` and ends at transform: none, so nothing stays transformed (docs/architecture/design.md, "Motion").
 */

/* ------------------------------------------------- shared motion (calm, lively and summer; never plain) */

@keyframes site-rise {
    from { opacity: 0; transform: translateY(22px); }
}
@keyframes site-rise-small {
    from { opacity: 0; transform: translateY(8px); }
}

/* Parts rise in once as they come into view (the script adds .in and a small stagger). */
html.lm .in { animation: site-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
html.lm .hero-copy > .in { animation-duration: 0.95s; }

/* Buttons lift a touch under the pointer and settle back. */
html.lm .btn { transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease; }
html.lm .btn:hover { transform: translateY(-2px); }
html.lm .btn:active { transform: translateY(1px); }

/* A question's answer slides in when opened and fades before the details shuts (the script waits for it). */
html.lm .faq details[open] > :not(summary) { animation: site-rise-small 0.32s ease-out backwards; }
html.lm .faq details > :not(summary) { transition: opacity 0.22s ease, transform 0.22s ease; }
html.lm .faq details.closing > :not(summary) { opacity: 0; transform: translateY(-6px); }
html.lm .faq summary::after { transition: color 0.2s ease; }
html.lm .faq summary:hover::after { color: var(--pine); }

/* ---------------------------------------------------------------------------------------- lively */

/* The hero painting drifts very slowly from side to side, like looking across the lake. */
@keyframes site-drift {
    from { transform: translateX(-1.5%) scale(1.05); }
    to { transform: translateX(1.5%) scale(1.05); }
}
html.lm[data-look="lively"] .hero-scene { overflow: hidden; }
html.lm[data-look="lively"] .hero-scene img { animation: site-drift 28s ease-in-out infinite alternate; }

/* The four pictures of the camp year float a little, each on its own time. */
@keyframes site-float {
    from { transform: translateY(0); }
    to { transform: translateY(-6px); }
}
html.lm[data-look="lively"] .stage img { animation: site-float 5.5s ease-in-out infinite alternate; }
html.lm[data-look="lively"] .stage:nth-child(2) img { animation-delay: -1.4s; }
html.lm[data-look="lively"] .stage:nth-child(3) img { animation-delay: -2.8s; }
html.lm[data-look="lively"] .stage:nth-child(4) img { animation-delay: -4.2s; }

/* A slow glow wanders over the dark bands. */
@keyframes site-glow {
    from { opacity: 0.5; transform: translate(0, 0); }
    to { opacity: 1; transform: translate(4%, 3%); }
}
html.lm[data-look="lively"] .pricing, html.lm[data-look="lively"] .usage, html.lm[data-look="lively"] .foot {
    position: relative; isolation: isolate; overflow: hidden;
}
html.lm[data-look="lively"] .pricing::before, html.lm[data-look="lively"] .usage::before, html.lm[data-look="lively"] .foot::before {
    content: ""; position: absolute; inset: -30% -10%; z-index: -1; pointer-events: none;
    background:
        radial-gradient(40% 50% at 20% 25%, rgba(47, 91, 255, 0.5), transparent 70%),
        radial-gradient(35% 45% at 85% 80%, rgba(255, 200, 58, 0.2), transparent 70%);
    animation: site-glow 14s ease-in-out infinite alternate;
}
html.lm[data-look="lively"] .foot::before { opacity: 0.6; animation-duration: 18s; }

/* A screenshot tilts a few degrees toward the pointer, with a soft light where the pointer is (the script sets
   --rx/--ry/--mx/--my and .tilt while the pointer is over it, and takes them off when it leaves). */
@media (hover: hover) and (pointer: fine) {
    html.lm[data-look="lively"] .shot:not(.shot-phone) { position: relative; transition: transform 0.25s ease, box-shadow 0.25s ease; }
    html.lm[data-look="lively"] .shot:not(.shot-phone)::after {
        content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.25s ease;
        background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 45%);
    }
    html.lm[data-look="lively"] .shot.tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); box-shadow: 0 26px 50px -24px rgba(20, 26, 51, 0.55); }
    html.lm[data-look="lively"] .shot.tilt::after { opacity: 1; }
}

/* Cards warm up under the pointer. */
html.lm[data-look="lively"] .reasons li, html.lm[data-look="lively"] .offer, html.lm[data-look="lively"] .related-list a, html.lm[data-look="lively"] .quote {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
html.lm[data-look="lively"] .reasons li:hover, html.lm[data-look="lively"] .offer:hover, html.lm[data-look="lively"] .related-list a:hover, html.lm[data-look="lively"] .quote:hover {
    transform: translateY(-3px); box-shadow: 0 18px 36px -24px rgba(20, 26, 51, 0.45);
}

/* ---------------------------------------------------------------------------------------- summer */

/* Warm cream paper, deep pine ink, clay and sun. The team colors of the office's menu turn to pine and clay too. */
html[data-look="summer"] {
    --birch: #faf3e4;
    --paper: #fffcf6;
    --sky: #f5e6c6;
    --pine: #1f3d35;
    --pine-deep: #16302a;
    --pine-light: #3f7d5a;
    --lake: #b4512b;
    --lake-soft: #e4b998;
    --sun: #f3b63f;
    --clay-soft: #f1b89b;
    --bark: #b4512b;
    --ink: #243330;
    --muted: #5e6b64;
    --grass: #3f7d5a;
    --team-blue: #2d6a5b;
    --team-gold: #f3b63f;
    --team-red: #d0603a;
    --team-green: #3f7d5a;
}

/* Generous type: a soft serif for every heading and price, a little more air everywhere. */
html[data-look="summer"] .site { font-size: 1.125rem; line-height: 1.65; }
html[data-look="summer"] .site h1, html[data-look="summer"] .site h2, html[data-look="summer"] .site h3, html[data-look="summer"] .site .brand,
html[data-look="summer"] .offer-price strong, html[data-look="summer"] .plan-price strong, html[data-look="summer"] .contact-mail {
    font-family: "Fraunces", Georgia, "Times New Roman", serif;
    font-weight: 600;
    font-variation-settings: "SOFT" 50;
    letter-spacing: -0.01em;
}
html[data-look="summer"] .brand .wordmark b { font-weight: 700; }
html[data-look="summer"] .hero h1 { font-size: clamp(2.7rem, 6.8vw, 5.4rem); line-height: 1; letter-spacing: -0.02em; max-width: 17ch; }
html[data-look="summer"] .hero-lede { font-size: clamp(1.15rem, 2vw, 1.4rem); color: #475550; }
html[data-look="summer"] .section-h { font-size: clamp(2.1rem, 4.8vw, 3.3rem); line-height: 1.06; }
html[data-look="summer"] .page-head h1 { font-size: clamp(2.4rem, 6vw, 4rem); }
html[data-look="summer"] .section-lede, html[data-look="summer"] .page-lede { font-size: 1.2rem; }
html[data-look="summer"] .helps-list h3, html[data-look="summer"] .stage-name, html[data-look="summer"] .assist h3, html[data-look="summer"] .reasons h3,
html[data-look="summer"] .everything-group h3 { font-size: 1.4rem; }
html[data-look="summer"] .offer-name { font-size: 1.8rem; }
@media (min-width: 60rem) {
    html[data-look="summer"] .helps, html[data-look="summer"] .tour, html[data-look="summer"] .everything, html[data-look="summer"] .year,
    html[data-look="summer"] .pricing, html[data-look="summer"] .faq, html[data-look="summer"] .contact, html[data-look="summer"] .cta,
    html[data-look="summer"] .quotes { padding-top: 5.5rem; padding-bottom: 5.5rem; }
}

/* Softer corners and a hairline of sand around the cards. */
html[data-look="summer"] .reasons li, html[data-look="summer"] .assist, html[data-look="summer"] .offer, html[data-look="summer"] .quote,
html[data-look="summer"] .plan, html[data-look="summer"] .site-form, html[data-look="summer"] .related-list a, html[data-look="summer"] .stage img,
html[data-look="summer"] .contact-art { border-radius: 1.5rem; }
html[data-look="summer"] .reasons li, html[data-look="summer"] .assist, html[data-look="summer"] .quote, html[data-look="summer"] .site-form { border: 1px solid #ecdfc1; }
html[data-look="summer"] .everything { border-top-color: #ecdfc1; }
html[data-look="summer"] .faq details { border-bottom-color: #e8dbbd; }
html[data-look="summer"] .shot { border-color: #e3d6b8; box-shadow: 0 22px 44px -24px rgba(31, 61, 53, 0.45); }
html[data-look="summer"] .everything-gold { --group: #d99a1e; }
html[data-look="summer"] .everything-ink { --group: #7c877f; }

/* Buttons in pine and sun. */
html[data-look="summer"] .site a.btn-pine { background: #2d6a5b; border-color: #2d6a5b; box-shadow: 0 4px 0 #1c4a3e; }
html[data-look="summer"] .site a.btn-pine:hover { background: #377e6c; }
html[data-look="summer"] .site a.btn-sun { box-shadow: 0 4px 0 #cf9220; }
html[data-look="summer"] .site a.btn-sun:hover { background: #f7c45a; }
html[data-look="summer"] .site .pricing-more a { color: #f7c45a; }

/* The hero shows the camp at golden hour (summer-hero.webp, picked by App\Support\SiteLook in site/home). */

/* The two options sit on the camp at dusk (summer-dusk.webp), darkened so the words stay easy to read. */
html[data-look="summer"] .pricing {
    position: relative; isolation: isolate; overflow: hidden;
    background: #16302a url(../images/site/summer-dusk.webp) center / cover no-repeat;
}
html[data-look="summer"] .pricing::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(22, 48, 42, 0.84), rgba(22, 48, 42, 0.94));
}
html[data-look="summer"] .pricing .section-lede { color: #d9d2bf; }
html[data-look="summer"] .pricing { color: #eee8d8; }

/* An ember glow breathes over the dark bands. */
@keyframes site-ember {
    from { opacity: 0.45; transform: translate(0, 0); }
    to { opacity: 1; transform: translate(3%, -2%); }
}
html.lm[data-look="summer"] .pricing::after, html.lm[data-look="summer"] .foot::after, html.lm[data-look="summer"] .usage::after {
    content: ""; position: absolute; inset: -20%; z-index: -1; pointer-events: none;
    background: radial-gradient(35% 45% at 22% 85%, rgba(243, 182, 63, 0.32), transparent 70%);
    animation: site-ember 12s ease-in-out infinite alternate;
}
html.lm[data-look="summer"] .foot, html.lm[data-look="summer"] .usage { position: relative; isolation: isolate; overflow: hidden; }