/* ================================================================
   JOÁ RIO — HOLLYWOOD PRELOADER
   "The Cliffside Opening" — multi-layer cinematic title card
   Iris pinpoint → Ken-Burns hero photo → flourishes → wordmark
   shimmer → italic standfirst → ornamental rule → curtain reveal
   Brand: Fraunces italic ivory, turquoise + fuchsia accents.
   ================================================================ */

/* ── Root overlay (always mounted) ── */
.joa-preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  overflow: hidden;
  background: #060d0f;
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease-out;
  transform: translateZ(0);
  will-change: opacity;
  touch-action: none;
}
.joa-preloader.is-done {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.5s ease-out, visibility 0s 0.5s;
}
body.joa-preloader-lock {
  overflow: hidden;
  height: 100vh;
}

/* ═══════════════════════════════════════════════════════════
   BACKDROP — hero villa photo, very dark, slow Ken-Burns
   ═══════════════════════════════════════════════════════════ */
.joa-preloader__backdrop {
  position: absolute;
  inset: 0;
  background-image: url("/static/images/Joa004_0.jpg");
  background-size: cover;
  background-position: center;
  transform: scale(1.08);
  opacity: 0;
  filter: brightness(0.5) saturate(0.85) contrast(1.04);
  transition: opacity 1.1s ease-out;
  z-index: 1;
}
.joa-preloader.is-intro .joa-preloader__backdrop {
  animation: joa-kenburns 7.2s 0.2s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@keyframes joa-kenburns {
  0%   { opacity: 0;    transform: scale(1.10); }
  14%  { opacity: 0.65; }
  100% { opacity: 0.95; transform: scale(1.0); }
}

/* Vignette over backdrop */
.joa-preloader__vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(ellipse at center,
      rgba(6, 13, 15, 0.20) 0%,
      rgba(6, 13, 15, 0.55) 45%,
      rgba(6, 13, 15, 0.85) 80%,
      rgba(6, 13, 15, 0.96) 100%),
    linear-gradient(180deg,
      rgba(6, 13, 15, 0.55) 0%,
      rgba(6, 13, 15, 0.10) 50%,
      rgba(6, 13, 15, 0.65) 100%);
  pointer-events: none;
}

/* Film grain — cinema quality */
.joa-preloader__grain {
  position: absolute;
  inset: -8%;
  z-index: 6;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.07 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  opacity: 0.18;
  mix-blend-mode: screen;
  animation: joa-grain 1.6s steps(6) infinite;
}
/* Stop infinite grain animation once preloader is done so page can settle */
.joa-preloader.is-done .joa-preloader__grain { animation: none !important; }
.joa-preloader.is-done .joa-preloader__embers,
.joa-preloader.is-done .joa-preloader__iris { animation-play-state: paused !important; }
@keyframes joa-grain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -2%); }
  60%  { transform: translate(-2%, -1%); }
  80%  { transform: translate(3%, 1%); }
  100% { transform: translate(0, 0); }
}

/* ═══════════════════════════════════════════════════════════
   IRIS — warm pinpoint that expands behind the wordmark
   ═══════════════════════════════════════════════════════════ */
.joa-preloader__iris {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.1);
  background: radial-gradient(circle at center,
    rgba(255, 246, 226, 0.95) 0%,
    rgba(255, 232, 192, 0.75) 25%,
    rgba(255, 200, 170, 0.40) 55%,
    rgba(233, 67, 156, 0.18) 80%,
    transparent 100%);
  filter: blur(10px);
  opacity: 0;
  z-index: 3;
  mix-blend-mode: screen;
  pointer-events: none;
}
.joa-preloader.is-intro .joa-preloader__iris {
  animation: joa-iris-bloom 2400ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@keyframes joa-iris-bloom {
  0%   { transform: translate(-50%, -50%) scale(0.1);  opacity: 0;    width: 24px;   height: 24px; }
  10%  { opacity: 1; }
  35%  { transform: translate(-50%, -50%) scale(1);    opacity: 1;    width: 320px;  height: 320px; }
  70%  { transform: translate(-50%, -50%) scale(1.6);  opacity: 0.85; width: 720px;  height: 720px; }
  100% { transform: translate(-50%, -50%) scale(2.4);  opacity: 0.45; width: 1100px; height: 1100px; }
}

/* Embers — drifting particles */
.joa-preloader__embers {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}
.joa-ember {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 240, 210, 0.85);
  box-shadow: 0 0 8px rgba(255, 220, 180, 0.7);
  opacity: 0;
  bottom: -10px;
}
.joa-preloader.is-intro .joa-ember { animation: joa-ember-rise 5s linear forwards; }
.joa-ember:nth-child(1)  { left:  8%; animation-delay: 0.2s;  animation-duration: 5.2s; }
.joa-ember:nth-child(2)  { left: 16%; animation-delay: 0.9s;  animation-duration: 4.6s; transform: scale(0.7); }
.joa-ember:nth-child(3)  { left: 27%; animation-delay: 1.4s;  animation-duration: 5.8s; }
.joa-ember:nth-child(4)  { left: 38%; animation-delay: 0.5s;  animation-duration: 5.0s; transform: scale(1.3); }
.joa-ember:nth-child(5)  { left: 49%; animation-delay: 1.7s;  animation-duration: 4.4s; }
.joa-ember:nth-child(6)  { left: 58%; animation-delay: 0.7s;  animation-duration: 5.6s; transform: scale(0.8); }
.joa-ember:nth-child(7)  { left: 67%; animation-delay: 1.2s;  animation-duration: 4.8s; }
.joa-ember:nth-child(8)  { left: 76%; animation-delay: 0.3s;  animation-duration: 5.4s; transform: scale(1.2); }
.joa-ember:nth-child(9)  { left: 85%; animation-delay: 1.9s;  animation-duration: 4.2s; }
.joa-ember:nth-child(10) { left: 92%; animation-delay: 0.6s;  animation-duration: 5.6s; transform: scale(0.6); }
@keyframes joa-ember-rise {
  0%   { opacity: 0;   transform: translate(0, 0)        scale(var(--s, 1)); }
  15%  { opacity: 0.9; }
  85%  { opacity: 0.6; }
  100% { opacity: 0;   transform: translate(20px, -100vh) scale(var(--s, 1)); }
}

/* ═══════════════════════════════════════════════════════════
   STAGE — wordmark + flourishes layer
   ═══════════════════════════════════════════════════════════ */
.joa-preloader__stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 5;
  padding: 0 24px;
  text-align: center;
  pointer-events: none;
}

/* Eyebrow — coordinates / film-credit feel */
.joa-preloader__eyebrow {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  font-size: clamp(0.55rem, 0.7vw, 0.7rem);
  color: rgba(250, 246, 240, 0.62);
  text-transform: uppercase;
  margin-bottom: clamp(20px, 2.4vw, 38px);
  opacity: 0;
}
.joa-preloader.is-intro .joa-preloader__eyebrow {
  animation: joa-fade-down 600ms 1100ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@keyframes joa-fade-down {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 0.7; transform: translateY(0); }
}

/* Flourish row — wordmark flanked by ornamental swashes */
.joa-preloader__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3vw, 56px);
  width: 100%;
  max-width: 1500px;
}

.joa-preloader__flourish {
  flex: 0 0 clamp(60px, 14vw, 220px);
  height: clamp(28px, 4vw, 56px);
  opacity: 0;
  pointer-events: none;
  color: #FAF6F0;
}
.joa-preloader__flourish svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.joa-preloader__flourish path,
.joa-preloader__flourish circle,
.joa-preloader__flourish line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
}
.joa-preloader__flourish path[data-draw] {
  stroke-dasharray: 280;
  stroke-dashoffset: 280;
}
.joa-preloader__flourish .joa-fl-dot {
  fill: #10A9B1;
  stroke: none;
  opacity: 0;
}
.joa-preloader.is-intro .joa-preloader__flourish {
  animation: joa-flourish-fade 700ms 500ms ease-out forwards;
}
.joa-preloader.is-intro .joa-preloader__flourish path[data-draw] {
  animation: joa-flourish-draw 1200ms 500ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
.joa-preloader.is-intro .joa-preloader__flourish .joa-fl-dot {
  animation: joa-fl-dot-bloom 500ms 1500ms ease-out forwards;
}
@keyframes joa-flourish-fade { from { opacity: 0; } to { opacity: 0.92; } }
@keyframes joa-flourish-draw { to { stroke-dashoffset: 0; } }
@keyframes joa-fl-dot-bloom {
  0%   { opacity: 0; transform: scale(0.4); transform-origin: center; }
  60%  { opacity: 1; transform: scale(1.3); }
  100% { opacity: 1; transform: scale(1);   }
}

/* WORDMARK — JOÁ (massive Fraunces italic) */
.joa-preloader__wordmark {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(4.5rem, 18vw, 17rem);
  line-height: 0.85;
  color: #FAF6F0;
  /* Light-sweep gradient through the letter */
  background: linear-gradient(100deg,
    rgba(250, 246, 240, 0.22)  0%,
    rgba(250, 246, 240, 0.22) 38%,
    rgba(255, 244, 220, 0.85) 46%,
    rgba(255, 248, 230, 1.00) 50%,
    rgba(255, 248, 230, 1.00) 51%,
    rgba(255, 244, 220, 0.85) 55%,
    rgba(250, 246, 240, 1.00) 62%,
    rgba(250, 246, 240, 1.00) 100%);
  background-size: 260% 100%;
  background-position: 100% 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 40px rgba(255, 240, 210, 0.22))
          drop-shadow(0 0 90px rgba(16, 169, 177, 0.10));
  white-space: nowrap;
  position: relative;
  letter-spacing: -0.01em;
}
.joa-preloader__wordmark::after {
  content: "";
  position: absolute;
  left: -12%;
  right: -12%;
  bottom: 4%;
  height: 60%;
  background: radial-gradient(ellipse at center,
    rgba(16, 169, 177, 0.18) 0%,
    transparent 70%);
  filter: blur(28px);
  z-index: -1;
  opacity: 0;
}
.joa-preloader.is-intro .joa-preloader__wordmark {
  animation: joa-light-sweep 2200ms 400ms cubic-bezier(0.5, 0.05, 0.2, 1) forwards;
}
.joa-preloader.is-intro .joa-preloader__wordmark::after {
  animation: joa-aura-bloom 1600ms 1000ms ease-out forwards;
}
@keyframes joa-light-sweep {
  0%   {
    background-position: 0% 0;
    transform: translateY(20px);
    opacity: 0;
    filter:
      drop-shadow(0 0 8px rgba(255, 240, 210, 0.05))
      blur(2px);
  }
  18%  {
    transform: translateY(0);
    opacity: 1;
    filter:
      drop-shadow(0 0 24px rgba(255, 240, 210, 0.18))
      blur(0);
  }
  60%  {
    filter:
      drop-shadow(0 0 60px rgba(255, 248, 230, 0.55))
      drop-shadow(0 0 110px rgba(16, 169, 177, 0.25))
      drop-shadow(0 0 140px rgba(233, 67, 156, 0.15))
      blur(0);
  }
  100% {
    background-position: 100% 0;
    transform: translateY(0);
    opacity: 1;
    filter:
      drop-shadow(0 0 40px rgba(255, 240, 210, 0.30))
      drop-shadow(0 0 90px rgba(16, 169, 177, 0.14))
      blur(0);
  }
}
@keyframes joa-aura-bloom {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* SECONDARY WORDMARK — RIO (wide-tracked, ivory, smaller) */
.joa-preloader__sub {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.62em;
  text-indent: 0.62em;
  font-size: clamp(0.95rem, 1.7vw, 1.7rem);
  color: rgba(250, 246, 240, 0.92);
  margin-top: clamp(14px, 1.8vw, 28px);
  opacity: 0;
}
.joa-preloader.is-intro .joa-preloader__sub {
  animation: joa-fade-up 700ms 1400ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

/* JEWEL RULE — turquoise diamond + fuchsia dots, hairline draws across */
.joa-preloader__rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1vw, 14px);
  margin-top: clamp(22px, 2.6vw, 40px);
  opacity: 0;
}
.joa-preloader.is-intro .joa-preloader__rule {
  animation: joa-fade-up 600ms 1700ms ease-out forwards;
}
.joa-preloader__rule-line {
  height: 1px;
  width: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(250, 246, 240, 0.9) 50%,
    transparent 100%);
  box-shadow: 0 0 6px rgba(250, 246, 240, 0.4);
}
.joa-preloader.is-intro .joa-preloader__rule-line {
  animation: joa-rule-draw 800ms 1800ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
@keyframes joa-rule-draw {
  from { width: 0; }
  to   { width: clamp(80px, 14vw, 180px); }
}
.joa-preloader__diamond {
  width: 9px;
  height: 9px;
  background: #10A9B1;
  transform: rotate(45deg) scale(0);
  box-shadow: 0 0 14px rgba(16, 169, 177, 0.7);
}
.joa-preloader.is-intro .joa-preloader__diamond {
  animation: joa-diamond-pop 600ms 2200ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes joa-diamond-pop {
  0%   { transform: rotate(45deg) scale(0); }
  60%  { transform: rotate(45deg) scale(1.4); }
  100% { transform: rotate(45deg) scale(1); }
}
.joa-preloader__pip {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #E9439B;
  box-shadow: 0 0 8px rgba(233, 67, 156, 0.6);
  opacity: 0;
}
.joa-preloader.is-intro .joa-preloader__pip {
  animation: joa-pip-pop 500ms 2400ms ease-out forwards;
}
@keyframes joa-pip-pop {
  from { opacity: 0; transform: scale(0.4); }
  to   { opacity: 1; transform: scale(1); }
}

/* TAGLINE — italic standfirst */
.joa-preloader__tagline {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1rem, 1.5vw, 1.5rem);
  letter-spacing: 0.04em;
  margin-top: clamp(20px, 2.4vw, 36px);
  color: rgba(250, 246, 240, 0.92);
  opacity: 0;
  text-shadow: 0 0 18px rgba(255, 240, 210, 0.18);
}
.joa-preloader.is-intro .joa-preloader__tagline {
  animation: joa-fade-up 800ms 2500ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@keyframes joa-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 0.95; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════
   CURTAINS — ivory-edged black halves; pull apart at reveal
   ═══════════════════════════════════════════════════════════ */
.joa-preloader__curtain {
  position: absolute;
  left: -2%;
  right: -2%;
  height: 51%;
  background:
    linear-gradient(180deg, rgba(6, 13, 15, 0) 0%, rgba(6, 13, 15, 0.0) 60%, rgba(6, 13, 15, 0.55) 100%),
    radial-gradient(ellipse at center, #0a1518 0%, #060d0f 70%);
  transition: transform 1.05s cubic-bezier(0.86, 0, 0.07, 1);
  z-index: 7;
  opacity: 0;
}
.joa-preloader__curtain--top    { top: 0;    transform: translateY(0); }
.joa-preloader__curtain--bottom { bottom: 0; transform: translateY(0); }
.joa-preloader.is-intro .joa-preloader__curtain {
  animation: joa-curtain-arm 400ms 4400ms ease-out forwards;
}
@keyframes joa-curtain-arm { to { opacity: 1; } }

/* Seam glow when curtains are about to part */
.joa-preloader__curtain--top::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -0.5px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(16, 169, 177, 0.55) 25%,
    rgba(255, 248, 230, 0.95) 50%,
    rgba(233, 67, 156, 0.55) 75%,
    transparent 100%);
  opacity: 0;
  filter: blur(0.5px);
}
.joa-preloader.is-intro .joa-preloader__curtain--top::after {
  animation: joa-seam-glow 700ms 4600ms ease-out forwards;
}
@keyframes joa-seam-glow {
  0%   { opacity: 0; }
  60%  { opacity: 1; }
  100% { opacity: 0.7; }
}

/* OPENING — curtains pull apart */
.joa-preloader.is-opening .joa-preloader__curtain--top    { transform: translateY(-100%); }
.joa-preloader.is-opening .joa-preloader__curtain--bottom { transform: translateY(100%); }
.joa-preloader.is-opening .joa-preloader__stage {
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.55s ease-out, transform 1.05s ease-out;
}
.joa-preloader.is-opening .joa-preloader__backdrop {
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 0.7s ease-out, transform 1.0s ease-out;
}

/* ═══════════════════════════════════════════════════════════
   QUICK MODE — page-to-page (subtler, faster)
   ═══════════════════════════════════════════════════════════ */
.joa-preloader.is-quick .joa-preloader__backdrop,
.joa-preloader.is-quick .joa-preloader__embers,
.joa-preloader.is-quick .joa-preloader__eyebrow,
.joa-preloader.is-quick .joa-preloader__flourish,
.joa-preloader.is-quick .joa-preloader__sub,
.joa-preloader.is-quick .joa-preloader__rule,
.joa-preloader.is-quick .joa-preloader__tagline {
  display: none;
}
.joa-preloader.is-quick .joa-preloader__wordmark {
  font-size: clamp(3rem, 9vw, 8rem);
  animation: joa-light-sweep 1100ms cubic-bezier(0.5, 0.05, 0.2, 1) forwards;
}
.joa-preloader.is-quick .joa-preloader__iris {
  animation: joa-iris-bloom 1400ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.joa-preloader.is-quick .joa-preloader__curtain { opacity: 1; }

/* ═══════════════════════════════════════════════════════════
   OUTGOING OVERLAY (link clicked → fade ivory-edge black over page)
   ═══════════════════════════════════════════════════════════ */
.joa-page-exit {
  position: fixed;
  inset: 0;
  z-index: 99998;
  background: #060d0f;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.joa-page-exit.is-active { opacity: 1; pointer-events: auto; }
.joa-page-exit__mark {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2.4rem, 7vw, 5rem);
  color: #FAF6F0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.42s 0.14s ease-out, transform 0.55s 0.14s cubic-bezier(0.22, 0.61, 0.36, 1);
  filter: drop-shadow(0 0 22px rgba(255, 240, 210, 0.25))
          drop-shadow(0 0 50px rgba(16, 169, 177, 0.18));
}
.joa-page-exit.is-active .joa-page-exit__mark {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .joa-preloader,
  .joa-preloader *,
  .joa-page-exit,
  .joa-page-exit__mark {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.18s !important;
  }
  .joa-preloader__grain,
  .joa-preloader__embers { display: none; }
  .joa-preloader__wordmark { background-position: 100% 0; opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .joa-preloader__row { gap: 14px; }
  .joa-preloader__flourish { flex-basis: 60px; height: 22px; }
  .joa-preloader__wordmark { font-size: clamp(4rem, 22vw, 7rem); }
  .joa-preloader__sub { letter-spacing: 0.42em; text-indent: 0.42em; font-size: 0.85rem; }
  .joa-preloader__eyebrow { letter-spacing: 0.32em; text-indent: 0.32em; font-size: 0.55rem; }
  .joa-preloader__tagline { font-size: 1.05rem; }
}