/* L'Occitane 50 years: all styling for index.html.
   Every size is written against the PDF's 1080px-wide page as calc(var(--u) * N),
   where N is the measurement in PDF pixels. --u is the column width / 1080, so the
   web page keeps the exact proportions of the printed story at any phone width.
   Mobile-first; the column is capped from 481px up and centred on the cream. */

:root {
    --cream: #f7f2ea;
    --cream-2: #f8f6f2;          /* page 2 outer frame, a touch cooler in the PDF */
    --ink: #39282e;              /* logo and body text plum-brown */
    --ink-soft: #6d5a60;
    --gold: #cdae6a;             /* frames, titles, times */
    --gold-deep: #a8884a;        /* gold text that has to stay readable on cream */
    --gold-pale: #e0cba1;        /* programme leader lines */
    --sun: #f5c746;              /* page 2 radial centre */
    --sun-edge: #f6ecd4;

    --u: calc(100vw / 1080);
    --vh: 1vh;                   /* overwritten from JS before first paint */
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (min-width: 481px) { :root { --u: 0.4444px; } }   /* 480px column */
@media (min-width: 769px) { :root { --u: 0.5px; } }      /* 540px column */
@media (min-width: 1025px) { :root { --u: 0.5333px; } }  /* 576px column */

* , *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { overscroll-behavior-y: none; }

html {
    background-color: var(--cream);
    -webkit-text-size-adjust: 100%;
    /* Firefox scrollbar: invisible while the cover is locked, fades in on entry */
    scrollbar-width: thin;
    scrollbar-color: transparent var(--cream);
    transition: scrollbar-color 0.8s ease;
}
html.scrollbar-ready { scrollbar-color: var(--gold) var(--cream); }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background-color: var(--cream); }
::-webkit-scrollbar-thumb { background-color: transparent; border-radius: 6px; transition: background-color 0.8s ease; }
html.scrollbar-ready ::-webkit-scrollbar-thumb { background-color: var(--gold); }

body {
    background-color: var(--cream);
    color: var(--ink);
    font-family: 'Noto Serif Georgian', Georgia, serif;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.05em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Intro scroll lock: the gesture is trapped in JS, the document stays scrollable
   (position:fixed / overflow:hidden freezes Chrome iOS's viewport short). */
html.is-locked, html.is-locked body { overscroll-behavior: none; touch-action: none; }

img { display: block; max-width: 100%; height: auto; }
button, input { font: inherit; color: inherit; }

main {
    width: 100%;
    margin: 0 auto;
}
@media (min-width: 481px) { main { width: 480px; } }
@media (min-width: 769px) { main { width: 540px; } }
@media (min-width: 1025px) { main { width: 576px; } }

/* ===== Loader ===== */

.loader {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    background-color: var(--cream);
    transition: opacity 0.7s ease;
}
.loader.fade-out { opacity: 0; pointer-events: none; }
.loader.gone { display: none; }

.loader__logo { width: 150px; opacity: 0.9; }

.loader__track {
    position: relative;
    width: 150px;
    height: 1px;
    overflow: hidden;
    background-color: var(--gold-pale);
}
.loader__bar {
    position: absolute;
    inset: 0;
    background-color: var(--ink);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.35s ease;
}
.loader__pct {
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}

/* ===== Music toggle (shown after the cover tap) ===== */

.music {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 900;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--gold);
    border-radius: 50%;
    background-color: rgba(247, 242, 234, 0.86);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 0.6s ease, transform 0.6s var(--ease);
    -webkit-tap-highlight-color: transparent;
}
.music.visible { opacity: 1; pointer-events: auto; transform: none; }
.music:active { transform: scale(0.96); }
.music:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }

.music__bars { display: flex; align-items: flex-end; gap: 3px; height: 14px; }
.music__bars i {
    display: block;
    width: 2px;
    height: 14px;
    background-color: var(--ink);
    transform-origin: bottom center;
    transform: scaleY(0.3);
    transition: transform 0.4s ease;
}
/* The bars move only while sound is actually playing: state, not decoration. */
.music.playing .music__bars i { animation: bar 1.1s ease-in-out infinite; }
.music.playing .music__bars i:nth-child(2) { animation-delay: -0.4s; }
.music.playing .music__bars i:nth-child(3) { animation-delay: -0.75s; }
@keyframes bar {
    0%, 100% { transform: scaleY(0.3); }
    50% { transform: scaleY(1); }
}

/* ===== Page 1: cover ===== */

/* The cover is the entry screen: a fixed overlay above the page (inset: 0, no
   forced height, see CLAUDE.md fix 4). Its contents use --cu, which is --u
   capped by the usable height / 1920, so the whole 9:16 PDF page, painting
   included, always fits on screen. Tall phones are width-limited and the spare
   height goes around the marks; short phones scale the poster down instead. */
.cover {
    --cu: min(var(--u), calc(var(--vh) * 100 / 1920));
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: calc(var(--cu) * 25);
    background-color: var(--cream);
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
}
.cover.is-gone { display: none; }

.cover__head {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: calc(var(--cu) * 60) 0 calc(var(--cu) * 80);
}
.cover__logo { width: calc(var(--cu) * 370); }
.cover__fifty { width: calc(var(--cu) * 368); margin-top: calc(var(--cu) * 76); }

.cover__btn {
    position: relative;
    margin-top: calc(var(--cu) * 102);
    width: calc(var(--cu) * 380);
    height: calc(var(--cu) * 84);
    min-height: 32px;
    border: calc(var(--cu) * 3) solid var(--gold);
    border-radius: 999px;
    background-color: transparent;
    color: rgb(200, 175, 114);   /* sampled from the PDF button label */
    font-size: calc(var(--cu) * 42);
    font-weight: 500;
    letter-spacing: 0.08em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.4s ease, color 0.4s ease, transform 0.2s ease;
}
.cover__btn:active { transform: scale(0.98); }
.cover__btn:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
@media (hover: hover) {
    .cover__btn:hover { background-color: rgba(205, 174, 106, 0.12); }
}
/* A soft ring that invites the one tap the page needs; stops once tapped. */
.cover__btn::after {
    content: '';
    position: absolute;
    inset: calc(var(--cu) * -3);
    border: 1px solid var(--gold);
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
}
html:not(.is-loading):not(.entered) .cover__btn::after { animation: ring 2.8s var(--ease) 1.6s infinite; }
@keyframes ring {
    0% { opacity: 0.55; transform: scale(1); }
    70%, 100% { opacity: 0; transform: scale(1.14, 1.4); }
}

.cover__art {
    width: calc(var(--cu) * 1014);
    flex: none;
    overflow: hidden;
    background-color: #f2cf6d;      /* painting's sun yellow while the image decodes */
    aspect-ratio: 1600 / 1502;
}
.cover__art img { width: 100%; height: 100%; object-fit: cover; }

/* Cover entrance: held behind the loader, then a short staggered rise. */
[data-intro] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 1.1s var(--ease) var(--d, 0s), transform 1.1s var(--ease) var(--d, 0s);
}
html:not(.is-loading) [data-intro] { opacity: 1; transform: none; }
/* The button keeps its own transition list for hover, so restate the intro one. */
.cover__btn[data-intro] {
    transition: opacity 1.1s var(--ease) var(--d, 0s), transform 1.1s var(--ease) var(--d, 0s), background-color 0.4s ease, color 0.4s ease;
}
html:not(.is-loading) .cover__btn[data-intro]:active { transform: scale(0.98); transition-delay: 0s; }

/* Opening, on the button tap (script.js adds .is-opening):
   1. the button warms to a soft gold fill, acknowledging the tap;
   2. the marks lift away one after another, the painting settles down and out;
   3. the cream sheet draws up like a curtain onto the yellow invitation,
      whose lines then rise in (staggered from script.js). ~1.8s in total. */
.cover.is-opening { pointer-events: none; }
.cover.is-opening .cover__btn { background-color: rgba(205, 174, 106, 0.16); }
.cover.is-opening [data-intro] {
    opacity: 0;
    transform: translateY(-16px);
    transition: opacity 0.7s var(--ease) var(--x, 0s), transform 0.9s var(--ease) var(--x, 0s), background-color 0.3s ease;
}
.cover.is-opening .cover__logo { --x: 0.12s; }
.cover.is-opening .cover__fifty { --x: 0.2s; }
.cover.is-opening .cover__btn { --x: 0.28s; }
.cover.is-opening .cover__art { --x: 0.1s; transform: translateY(22px); }
.cover.is-lifting {
    -webkit-clip-path: inset(0 0 100% 0);
    clip-path: inset(0 0 100% 0);
    transition: -webkit-clip-path 1.15s cubic-bezier(0.76, 0, 0.24, 1), clip-path 1.15s cubic-bezier(0.76, 0, 0.24, 1);
}

/* ===== Page 2: invitation ===== */

.invite {
    padding: calc(var(--u) * 27) calc(var(--u) * 25);
    background-color: var(--cream-2);
}

.invite__panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: calc(100vh - var(--u) * 54);
    padding: calc(var(--u) * 125) calc(var(--u) * 40) calc(var(--u) * 60);
    text-align: center;
    background-color: var(--sun);
    background-image: radial-gradient(ellipse 78% 62% at 50% 52%, #f5c746 0%, #f5c84b 38%, #f5d77e 68%, #f6e6bd 88%, #f6ecd4 100%);
}
.vh-lock .invite__panel { min-height: calc(var(--vh) * 100 - var(--u) * 54); }

.invite__logo { width: calc(var(--u) * 392); }

.invite__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: calc(var(--u) * 120) 0 calc(var(--u) * 90);
}

.invite__lead {
    font-size: calc(var(--u) * 52);
    line-height: 1.5;
    font-weight: 400;
}

.dash {
    display: block;
    width: calc(var(--u) * 32);
    height: calc(var(--u) * 4);
    min-height: 2px;
    margin: calc(var(--u) * 92) 0;
    background-color: var(--ink);
}

.invite__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: 500;
    font-stretch: 82%;
    line-height: 1.04;
}
.invite__t1 { font-size: calc(var(--u) * 104); }
.invite__t2 { font-size: calc(var(--u) * 178); line-height: 1; letter-spacing: -0.01em; }

.invite__when { display: flex; flex-direction: column; align-items: center; }
.invite__date { font-size: calc(var(--u) * 54); font-weight: 700; line-height: 1.35; font-style: italic; letter-spacing: 0.02em; }
.invite__venue { font-size: calc(var(--u) * 52); line-height: 1.45; letter-spacing: 0.04em; }

/* ===== Chevron (pages 2 and 3) ===== */

.chevron {
    display: block;
    width: calc(var(--u) * 74);
    padding: 10px;
    box-sizing: content-box;
    color: var(--ink);
    -webkit-tap-highlight-color: transparent;
}
.chevron svg {
    display: block;
    width: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 3.4;
    stroke-linecap: square;
    stroke-linejoin: miter;
}
.chevron--gold { color: var(--gold); margin: auto auto 0; }
/* Gentle drift so the arrow reads as "more below"; it is part of the PDF design. */
.chevron svg { animation: drift 2.6s ease-in-out infinite; }
@keyframes drift {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(5px); }
}

/* ===== Framed sheets: programme, artwork, RSVP ===== */

.sheet { padding: calc(var(--u) * 57) calc(var(--u) * 47); }

.sheet__frame {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--u) * 114);
    border: calc(var(--u) * 4) solid var(--gold);
    padding: calc(var(--u) * 66) calc(var(--u) * 28) calc(var(--u) * 50) calc(var(--u) * 64);
}
.vh-lock .sheet__frame { min-height: calc(var(--vh) * 100 - var(--u) * 114); }

.sheet__frame--center {
    align-items: center;
    padding-left: calc(var(--u) * 40);
    padding-right: calc(var(--u) * 40);
    text-align: center;
}

.sheet__title {
    color: var(--gold);
    font-size: calc(var(--u) * 84);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: 0.01em;
}
.sheet__title--center { margin-top: calc(var(--u) * 90); }

/* --- Programme --- */

.prog__head {
    display: grid;
    grid-template-columns: calc(var(--u) * 315) 1fr;
    align-items: center;
}
.prog__emblem {
    width: calc(var(--u) * 158);
    margin-left: calc(var(--u) * 30);
}

.prog {
    list-style: none;
    margin-top: calc(var(--u) * 110);
}
.prog__row {
    display: grid;
    grid-template-columns: calc(var(--u) * 130) calc(var(--u) * 150) 1fr;
    column-gap: calc(var(--u) * 18);
    align-items: start;
}
.prog__row + .prog__row { margin-top: calc(var(--u) * 62); }

.prog__time {
    color: var(--gold);
    font-size: calc(var(--u) * 60);
    font-stretch: 66%;
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: -0.02em;
    font-variant-numeric: lining-nums;
}

.prog__line {
    display: block;
    height: 1px;
    margin-top: calc(var(--u) * 34);
    background-color: var(--gold-pale);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.2s var(--ease) 0.25s;
}
.prog__row.is-in .prog__line { transform: scaleX(1); }

.prog__name {
    font-size: calc(var(--u) * 42);
    font-weight: 700;
    line-height: 1.28;
}
.prog__name--split { line-height: 1.95; margin-top: calc(var(--u) * -12); }
.prog__item {
    margin-top: calc(var(--u) * 22);
    font-size: calc(var(--u) * 33);
    line-height: 1.3;
}
.prog__name + .prog__item { margin-top: calc(var(--u) * 40); }

.prog + .chevron { margin-top: calc(var(--u) * 70); }

/* --- Artwork --- */

.about__emblem {
    width: calc(var(--u) * 236);
    margin-top: calc(var(--u) * 50);
}
.about__text {
    margin: auto 0;
    padding: calc(var(--u) * 120) 0;
    max-width: calc(var(--u) * 900);
}
.about__text p {
    font-size: calc(var(--u) * 37);
    line-height: 1.38;
}
.about__text p + p { margin-top: calc(var(--u) * 54); }
.about__mono {
    width: calc(var(--u) * 126);
    margin-bottom: calc(var(--u) * 70);
}

/* --- RSVP --- */

.rsvp {
    width: 100%;
    max-width: calc(var(--u) * 760);
    margin: auto 0;
    padding: calc(var(--u) * 110) 0 calc(var(--u) * 70);
    text-align: left;
}

.rsvp__field + .rsvp__field { margin-top: calc(var(--u) * 54); }

.rsvp__label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--ink);
}

/* 16px minimum: anything smaller makes iOS zoom the page on focus. */
.rsvp__input {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 10px 0 9px;
    border: 0;
    border-bottom: 1px solid var(--gold);
    border-radius: 0;
    background-color: transparent;
    font-size: 16px;
    color: var(--ink);
    transition: border-color 0.3s ease, background-color 0.3s ease;
    -webkit-appearance: none;
    appearance: none;
}
.rsvp__input:focus { outline: none; border-bottom-color: var(--ink); }
.rsvp__input:focus-visible { box-shadow: 0 1px 0 0 var(--ink); }

.rsvp__choice {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: calc(var(--u) * 80);
}
.rsvp__option { position: relative; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rsvp__option input { position: absolute; opacity: 0; pointer-events: none; }
.rsvp__option span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    padding: 0 8px;
    border: 1px solid var(--gold);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-align: center;
    color: var(--ink);
    transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
.rsvp__option input:checked + span { background-color: var(--ink); border-color: var(--ink); color: var(--cream); }
.rsvp__option input:focus-visible + span { outline: 1px solid var(--ink); outline-offset: 3px; }
@media (hover: hover) {
    .rsvp__option:hover input:not(:checked) + span { background-color: rgba(205, 174, 106, 0.12); }
}

.rsvp__submit {
    display: block;
    width: 100%;
    height: 48px;
    margin-top: calc(var(--u) * 64);
    border: 1px solid var(--ink);
    border-radius: 999px;
    background-color: var(--ink);
    color: var(--cream);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.35s ease, color 0.35s ease, opacity 0.35s ease, transform 0.2s ease;
}
.rsvp__submit:active { transform: scale(0.98); }
.rsvp__submit:disabled { opacity: 0.55; cursor: default; }
.rsvp__submit:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
@media (hover: hover) {
    .rsvp__submit:not(:disabled):hover { background-color: transparent; color: var(--ink); }
}

.rsvp__status {
    min-height: 18px;
    margin-top: 14px;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-align: center;
    color: var(--ink-soft);
}

.rsvp__done {
    margin: auto 0;
    padding: calc(var(--u) * 80) 0;
    text-align: center;
    animation: rise 0.9s var(--ease) both;
}
.rsvp__done[hidden] { display: none; }
.rsvp__done-title { font-size: calc(var(--u) * 52); font-weight: 700; line-height: 1.3; }
.rsvp__done-sub { margin-top: calc(var(--u) * 30); font-size: calc(var(--u) * 38); line-height: 1.45; color: var(--ink-soft); }
@keyframes rise {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

/* ===== Scroll reveal ===== */

[data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 1.1s var(--ease) var(--d, 0s), transform 1.1s var(--ease) var(--d, 0s);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* ===== Desktop: larger form controls to match the wider column ===== */

@media (min-width: 769px) {
    .rsvp__label { font-size: 13px; }
    .rsvp__option span { font-size: 13px; height: 50px; }
    .rsvp__submit { height: 52px; font-size: 14px; }
    .music { top: 24px; right: 24px; }
}

/* ===== Reduced motion: everything lands in place, nothing loops ===== */

@media (prefers-reduced-motion: reduce) {
    [data-intro], [data-reveal] { opacity: 1; transform: none; transition: none; }
    .cover.is-lifting { transition: none; }
    .prog__line { transform: none; transition: none; }
    .chevron svg, .music.playing .music__bars i, .cover__btn::after, .rsvp__done { animation: none; }
}