/* ==========================================================================
   SHALEA GOLD — Coming Soon
   ========================================================================== */

/* ---------- Fonts (self-hosted, SIL Open Font License) ---------- */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */

:root {
  --ink: #070707;
  --ivory: #f4efe6;
  --champagne: #eadbc3;
  --champagne-muted: rgba(234, 219, 195, .74);
  --label: rgba(238, 231, 220, .88);
  --hairline: rgba(234, 219, 195, .45);
  --divider: rgba(214, 204, 192, .62);
  --crimson: #9e1426;

  --font-display: "Cormorant Garamond", "Cormorant", Garamond, "EB Garamond", Baskerville, "Times New Roman", serif;

  --ease-lux: cubic-bezier(.22, .61, .36, 1);

  --H: 100vh;
}

@supports (height: 100dvh) {
  :root { --H: 100dvh; }
}

/* ---------- Base ---------- */

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

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

body {
  color: var(--ivory);
  font-family: var(--font-display);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Scene geometry ----------
   Everything is laid out from the photo's own coordinates (in its 736 × 918
   pixels), so the message always sits inside the ring and the type never
   covers it, whatever the screen shape. */

.scene {
  /* measured on assets/img/shalea-hero.webp */
  --img-w: 736;
  --img-h: 918;
  --ring-top: 388;      /* outer edge of the ring */
  --ring-bottom: 622;
  --hole-x: 370;        /* centre of the ring's opening */
  --hole-y: 512;
  --brand-y: 235;       /* where the reference artwork centres the brand… */
  --count-y: 736;       /* …and the countdown */

  --ring-max: .58;      /* the ring never takes more than this share of the screen height */
  --ring-bias: .4;      /* share of the remaining height kept above the ring */
  --brand-h: .056;      /* type limits as a share of the screen height */
  --digits-h: .095;

  --W: 100vw;

  /* screen px per photo px: "cover", capped on very wide screens so the type keeps its air */
  --s: min(
    max(var(--W) / var(--img-w), var(--H) / var(--img-h)),
    var(--H) * var(--ring-max) / (var(--ring-bottom) - var(--ring-top))
  );
  --stage-w: calc(var(--s) * var(--img-w));
  --stage-h: calc(var(--s) * var(--img-h));
  --stage-x: calc((var(--W) - var(--stage-w)) / 2);
  --stage-y: clamp(
    calc(var(--H) - var(--stage-h)),
    calc((var(--H) - var(--s) * (var(--ring-bottom) - var(--ring-top))) * var(--ring-bias) - var(--s) * var(--ring-top)),
    0px
  );
  --ring-top-y: calc(var(--stage-y) + var(--s) * var(--ring-top));
  --ring-bottom-y: calc(var(--stage-y) + var(--s) * var(--ring-bottom));

  /* type scale: follows the photo like the reference, limited by width and height */
  --fs-brand: min(var(--s) * 43, var(--W) * .088, var(--H) * var(--brand-h), 84px);
  --fs-digits: min(var(--s) * 83, var(--W) * .14, var(--H) * var(--digits-h), 128px);
  --fs-label: clamp(10px, var(--fs-digits) * .155, 20px);
  --fs-message: clamp(10px, var(--s) * 18, 30px);
  --fs-social: clamp(10px, var(--H) * .0135, 12.5px);

  --gutter: max(16px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --gap: max(16px, var(--H) * .03);
  --edge-top: calc(env(safe-area-inset-top, 0px) + max(20px, var(--H) * .035));
  --edge-bottom: calc(env(safe-area-inset-bottom, 0px) + max(12px, var(--H) * .024));
  --footer-space: calc(44px + max(14px, var(--H) * .022));

  /* vertical centre lines of the brand and the countdown */
  --brand-half: calc(var(--fs-brand) * 1.02);
  --brand-center: clamp(
    calc(var(--edge-top) + var(--brand-half)),
    calc(var(--stage-y) + var(--s) * var(--brand-y)),
    calc(var(--ring-top-y) - var(--gap) - var(--brand-half))
  );
  --count-half: calc(var(--fs-digits) * .6);
  --count-center: clamp(
    calc(var(--ring-bottom-y) + var(--gap) + var(--count-half)),
    calc(var(--stage-y) + var(--s) * var(--count-y)),
    calc(var(--H) - var(--edge-bottom) - var(--footer-space) - var(--count-half))
  );

  position: relative;
  height: var(--H);
  overflow: hidden;
  isolation: isolate;
}

/* ---------- Photo ---------- */

.photo {
  position: absolute;
  z-index: 1;
  left: var(--stage-x);
  top: var(--stage-y);
  width: var(--stage-w);
  height: var(--stage-h);
}

.photo__img {
  display: block;
  width: 100%;
  height: 100%;
}

/* Only visible on very wide or short-landscape screens, where the photo is
   narrower than the window: a blurred echo of the same photo fills the sides. */
.backdrop { display: none; }

/* Grading after the reference: overall slightly deeper, the chin pulled into
   shadow behind the countdown, a soft pool of shadow behind the name, vignette. */
.veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-color: rgba(22, 15, 8, .2); /* warm black: the faint silver-print tone of the artwork */
  background-image:
    radial-gradient(ellipse calc(var(--fs-digits) * 4.7) calc(var(--fs-digits) * 1.15) at 50% var(--count-center),
      rgba(0, 0, 0, .8), rgba(0, 0, 0, .55) 45%, rgba(0, 0, 0, 0)),
    linear-gradient(180deg,
      rgba(5, 5, 5, 0) calc(var(--ring-bottom-y) - var(--s) * 8),
      rgba(5, 5, 5, .3) calc(var(--ring-bottom-y) + var(--s) * 90),
      rgba(5, 5, 5, .32) 100%),
    radial-gradient(ellipse calc(var(--fs-brand) * 6.6) calc(var(--fs-brand) * 2.8) at 50% var(--brand-center),
      rgba(0, 0, 0, .72), rgba(0, 0, 0, 0)),
    radial-gradient(ellipse 125% 95% at 50% calc(var(--stage-y) + var(--s) * var(--hole-y)),
      rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .5) 100%);
}

/* Fine film grain, as in the campaign artwork. */
.scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.6 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: .12;
  mix-blend-mode: overlay;
}

/* ---------- Brand ---------- */

.brand {
  position: absolute;
  z-index: 4;
  left: var(--gutter);
  right: var(--gutter);
  top: var(--brand-center);
  transform: translateY(-50%);
  text-align: center;
  color: var(--champagne);
  text-shadow: 0 1px 24px rgba(0, 0, 0, .35);
}

.brand__name {
  margin: 0;
  font-size: var(--fs-brand);
  font-weight: 500;
  line-height: 1;
  letter-spacing: .255em;
  text-indent: .255em;         /* balances the tracking after the last letter */
  text-transform: uppercase;
  white-space: nowrap;
}

.brand__by {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--fs-brand) * .7);
  margin: calc(var(--fs-brand) * .3) 0 0;
  font-size: max(10px, var(--fs-brand) * .36);
  line-height: 1.2;
  letter-spacing: .44em;
  text-transform: uppercase;
}

.brand__by-text { padding-left: .44em; }

.brand__rule {
  flex: none;
  width: calc(var(--fs-brand) * 1.05);
  height: 1px;
  background: var(--hairline);
}

/* ---------- Message inside the ring ---------- */

.message {
  position: absolute;
  z-index: 4;
  left: calc(var(--stage-x) + var(--s) * var(--hole-x));
  top: calc(var(--stage-y) + var(--s) * var(--hole-y));
  width: calc(var(--s) * 220);
  transform: translate(-50%, -50%);
  text-align: center;
}

.message__inner {
  display: grid;
  margin: 0;
  font-size: var(--fs-message);
  line-height: 1.62;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ivory);
}

.message__set {
  grid-area: 1 / 1;
  align-self: center;
  transition: opacity 1.8s var(--ease-lux);
}

.message__line {
  display: block;
  text-indent: .3em;
  white-space: nowrap;
}

.message__set--live { opacity: 0; }
.is-live .message__set--coming { opacity: 0; }
.is-live .message__set--live { opacity: 1; }

/* ---------- Countdown ---------- */

.countdown {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: var(--count-center);
  width: min(var(--fs-digits) * 7.2, var(--W) - 2 * var(--gutter));
  transform: translate(-50%, -50%);
  font-size: var(--fs-digits);
}

.countdown__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.countdown__unit {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.countdown__unit + .countdown__unit::before {
  content: "";
  position: absolute;
  left: 0;
  top: -.12em;
  height: 1.04em;
  width: 1px;
  background: linear-gradient(180deg, rgba(214, 204, 192, 0), var(--divider) 12%, var(--divider) 88%, rgba(214, 204, 192, 0));
}

.countdown__value {
  display: flex;
  justify-content: center;
  font-weight: 700;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  line-height: 1;
  color: var(--crimson);
  text-shadow: 0 2px 22px rgba(0, 0, 0, .45);
}

/* every digit gets the same width, so changing numbers never shift */
.digit {
  position: relative;
  display: flex;
  justify-content: center;
  width: .51em;
}

.digit__glyph { display: block; }

/* the old figure leaves first, the new one follows: no overlapping ghosts */
.digit__glyph.is-leaving {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  animation: digit-out .34s ease-in forwards;
}

.digit__glyph.is-entering {
  animation: digit-in .56s .16s var(--ease-lux) both;
}

.countdown__label {
  margin-top: calc(var(--fs-digits) * -.035); /* the figures' box carries deep descender space */
  padding-left: .3em;
  font-size: var(--fs-label);
  line-height: 1.2;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--label);
}

.countdown__fallback {
  display: none;
  margin: 0;
  font-size: max(12px, var(--fs-label) * 1.15);
  letter-spacing: .3em;
  text-align: center;
  color: var(--champagne);
}

.no-js .countdown__grid { display: none; }
.no-js .countdown__fallback { display: block; }

/* ---------- Social ---------- */

.social {
  position: absolute;
  z-index: 4;
  left: var(--gutter);
  right: var(--gutter);
  bottom: var(--edge-bottom);
  display: flex;
  justify-content: center;
}

.social__link {
  display: inline-flex;
  align-items: center;
  gap: 1em;
  min-height: 44px;
  padding: 0 .4em 0 .72em;
  font-size: var(--fs-social);
  letter-spacing: .32em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--champagne-muted);
  transition: color .6s var(--ease-lux);
}

.social__rule {
  width: 1.6em;
  height: 1px;
  background: currentColor;
  opacity: .6;
  transition: width .8s var(--ease-lux);
}

.social__handle { color: var(--champagne); }

.social__link:hover,
.social__link:focus-visible { color: var(--champagne); }

.social__link:hover .social__rule,
.social__link:focus-visible .social__rule { width: 2.6em; }

.social__link:focus-visible {
  outline: 1px solid var(--hairline);
  outline-offset: 2px;
}

/* ---------- Wide and short screens ---------- */

/* landscape shows a closer crop of the photo, so the type gives it a little more room */
@media (min-aspect-ratio: 5/4) {
  .scene {
    --brand-h: .05;
    --digits-h: .08;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .scene {
    --ring-max: .5;
    --gap: 12px;
    --edge-top: calc(env(safe-area-inset-top, 0px) + 14px);
    --footer-space: 0px;
  }

  .social {
    left: auto;
    right: var(--gutter);
  }
}

@media (min-aspect-ratio: 9/5), (orientation: landscape) and (max-height: 520px) {
  .backdrop {
    display: block;
    position: absolute;
    inset: -8%;
    z-index: 0;
    background: url("../img/shalea-hero.jpg") center 45% / cover no-repeat;
    background-image: image-set(url("../img/shalea-hero.webp") type("image/webp"), url("../img/shalea-hero.jpg") type("image/jpeg"));
    filter: blur(36px) brightness(.3);
  }

  .photo {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  }
}

/* ---------- Entrance (only when JavaScript runs) ---------- */

.js .backdrop,
.js .photo,
.js .brand__name,
.js .brand__by,
.js .message__inner,
.js .countdown__grid,
.js .social { opacity: 0; }

.js.is-loaded .backdrop,
.js.is-loaded .photo { animation: photo-in 2.8s var(--ease-lux) both; }

.js.is-loaded .brand__name { animation: brand-in 2.2s .5s var(--ease-lux) both; }

.js.is-loaded .brand__by { animation: fade-in 1.6s 1.3s var(--ease-lux) both; }

.js.is-loaded .brand__rule { animation: rule-in 1.6s 1.4s var(--ease-lux) both; }
.js.is-loaded .brand__rule:first-child { transform-origin: right center; }
.js.is-loaded .brand__rule:last-child { transform-origin: left center; }

.js.is-loaded .message__inner { animation: fade-in 2s 1.6s var(--ease-lux) both; }

.js .countdown.is-ready .countdown__grid { animation: rise-in 1.6s var(--ease-lux) both; }

.js.is-loaded .social { animation: fade-in 1.6s 2.6s var(--ease-lux) both; }

@keyframes photo-in {
  from { opacity: 0; transform: scale(1.035); }
  to   { opacity: 1; transform: none; }
}

@keyframes brand-in {
  from { opacity: 0; letter-spacing: .34em; filter: blur(6px); }
  to   { opacity: 1; letter-spacing: .255em; filter: blur(0); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes rule-in {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes rise-in {
  from { opacity: 0; transform: translateY(.12em); }
  to   { opacity: 1; transform: none; }
}

@keyframes digit-out {
  to { opacity: 0; transform: translate(-50%, -.07em); }
}

@keyframes digit-in {
  from { opacity: 0; transform: translateY(.07em); }
}

@media (prefers-reduced-motion: reduce) {
  .js.is-loaded .backdrop,
  .js.is-loaded .photo,
  .js.is-loaded .brand__name,
  .js.is-loaded .brand__by,
  .js.is-loaded .message__inner,
  .js .countdown.is-ready .countdown__grid,
  .js.is-loaded .social { animation: fade-in .8s ease both; }

  .js.is-loaded .brand__rule { animation: none; }

  .digit__glyph.is-leaving { display: none; }
  .digit__glyph.is-entering { animation: none; }

  .message__set { transition-duration: .4s; }
  .social__link,
  .social__rule { transition: none; }
}