/* Save the Date - Lauriane & Nicolas */

:root {
  --orange: #f37021;      /* Hermès orange */
  --orange-hover: #ff7f2e;
  --burnt: #b9480c;       /* shadows */
  --cream: #fdf1dc;
  --peach: #ffd9bd;
  --ink: #3a2418;
  --sky: rgb(63, 170, 252);
  --title-font: 'Alfa Slab One', serif;
  --ui-font: system-ui, -apple-system, sans-serif;
}

html, body { margin: 0; height: 100%; overflow: hidden; background: var(--sky); }

/* ---- Scene: full-screen backdrop, framed by the script ---- */

.stage { position: fixed; inset: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.scene { position: relative; flex-shrink: 0; container-type: inline-size; }
.scene > .decor { display: block; width: 100%; height: auto; }
.scene--h { width: max(100vw, calc(100vh * 2560 / 1440)); }
.scene--v { width: max(100vw, calc(100vh * 1290 / 2800)); display: none; }
/* Portrait backdrop for phones only: on a portrait tablet, more than a third of it would be cropped */
@media (max-aspect-ratio: 5/8) { .scene--h { display: none; } .scene--v { display: block; } }

.sky { position: absolute; top: 0; background-size: 100% 100%; pointer-events: none; }
.sky[hidden] { display: none; }
.head { position: absolute; height: auto; pointer-events: none; }

/* ---- Title (sizes in cqw: it follows the backdrop width) ---- */

.titles { position: absolute; left: 0; right: 0; padding-top: 3.2cqw; transform-origin: 50% 0;
          display: flex; flex-direction: column; align-items: center; text-align: center;
          font-family: var(--title-font); font-weight: 400; }
.titles > * { transform: skewX(-10deg); margin: 0; }
.t-names, .t-title { white-space: nowrap; text-shadow: 0.07em 0.07em 0 var(--burnt), 0.12em 0.12em 0 rgba(185, 72, 12, .45); }
.t-names { line-height: 1.05; color: var(--orange); }
.t-title { line-height: 0.92; color: var(--cream); font-weight: 400; }
.t-info { display: flex; flex-direction: column; align-items: center; gap: 0.35cqw; line-height: 1.1;
          padding: 0.5em 1.1em 0.55em; border: none; cursor: pointer;
          background: rgba(243, 112, 33, .94); color: var(--cream); font-family: inherit; font-weight: 400;
          text-shadow: 0.06em 0.06em 0 var(--burnt); box-shadow: 0.18em 0.18em 0 var(--burnt); }
.t-info:hover { background: var(--orange-hover); }
.t-info > span { white-space: nowrap; }

.scene--h .titles { top: -1.4cqw; padding-top: 2.6cqw; gap: 0.9cqw; }
.scene--h .t-names { font-size: 2.2cqw; }
.scene--h .t-title { font-size: 5.6cqw; }
.scene--h .t-info { font-size: 2.3cqw; padding: 0.4em 1.1em 0.45em; }
.scene--v .titles { top: 14%; gap: 1.6cqw; }
.scene--v .t-names { font-size: 5cqw; }
.scene--v .t-title { font-size: 10.2cqw; }
.scene--v .t-info { font-size: 3.9cqw; }

/* ---- The couple's scooter (animated by the script) ---- */

.rider { position: absolute; left: -60%; pointer-events: none; will-change: left; }
.scene--h .rider { bottom: 3%; height: calc(36.99% * var(--rider-scale, 1)); }
.scene--v .rider { bottom: 7%; height: 21%; }
.bike { position: relative; height: 100%; aspect-ratio: 1447 / 1101; transform-origin: 46% 99%; } /* pivot: rear wheel */
.bike > img { position: absolute; display: block; height: auto; }
.bike > .bike-base { inset: 0; width: 100%; height: 100%; }

/* ---- Language menu ---- */

.lang { position: fixed; z-index: 40; top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right));
        display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
        font-family: var(--ui-font); transform: skewX(-10deg); transform-origin: top right; }
.lang-btn { display: flex; align-items: center; gap: 5px; min-height: 30px; padding: 0 7px; border: none; cursor: pointer;
            background: var(--peach); color: var(--burnt); box-shadow: 2px 2px 0 rgba(185, 72, 12, .35); }
.lang .flag { display: block; width: 24px; height: 16px; flex-shrink: 0; object-fit: cover; outline: 1px solid rgba(185, 72, 12, .3); }
.lang .caret { font-size: 9px; transition: transform .15s; }
.lang-btn[aria-expanded="true"] .caret { transform: rotate(180deg); }
.lang-menu { display: flex; flex-direction: column; min-width: 130px; background: var(--cream);
             border: 2px solid var(--peach); box-shadow: 2px 2px 0 rgba(185, 72, 12, .35); }
.lang-menu[hidden] { display: none; }
.lang-menu a { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 10px;
               color: var(--ink); text-decoration: none; font: 400 14px var(--ui-font); }
.lang-menu a:hover { background: rgba(255, 217, 189, .5); }
.lang-menu a[aria-current] { background: var(--peach); }

/* ---- "Add to my calendar" dialog ---- */

.cal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
       padding: 16px; box-sizing: border-box; background: rgba(58, 36, 24, .55); }
.cal[hidden] { display: none; }
.cal-card { width: 100%; max-width: 400px; padding: 24px; box-sizing: border-box; display: flex; flex-direction: column; gap: 12px;
            background: var(--cream); box-shadow: 8px 8px 0 var(--burnt); outline: none;
            font-family: var(--title-font); font-style: italic; color: var(--ink); }
.cal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 4px; }
.cal-title { margin: 0; font-size: 24px; font-weight: 400; line-height: 1.1; color: var(--orange); text-shadow: 2px 2px 0 var(--burnt); }
.cal-close { flex-shrink: 0; width: 44px; height: 44px; margin: -10px -12px -10px 0; padding: 0; border: none; background: none;
             cursor: pointer; font-size: 30px; line-height: 1; color: var(--burnt); }
.cal-close:focus-visible { outline: 2px solid var(--orange); }
.cal a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 16px;
         background: var(--orange); color: var(--cream); text-decoration: none; font-size: 17px; box-shadow: 3px 3px 0 var(--burnt); }
.cal a:hover { filter: brightness(1.06); }
.cal a small { font-size: 13px; opacity: .85; }
.cal a.alt { background: #fff; color: var(--burnt); }