/* ==========================================================================
   Jora Junction — Coming Soon
   ========================================================================== */

:root {
  --ink:        #0b0d0f;
  --gold:       #d9b26a;
  --gold-soft:  #f0dcb4;
  --teal:       #2f7f8c;
  --text:       #f4f1ec;
  --text-dim:   rgba(244, 241, 236, .66);
  --line:       rgba(217, 178, 106, .28);
  --glass:      rgba(12, 14, 16, .52);

  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --ease: cubic-bezier(.2, .8, .2, 1);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  background: var(--ink);
  color: var(--text);
  min-height: 100svh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

/* --------------------------------------------------------------------------
   Backdrop
   -------------------------------------------------------------------------- */

.backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; }

.backdrop__image {
  position: absolute; inset: -4%;
  background: url('background.webp') 26% center / cover no-repeat;
  transform: scale(1.06);
  animation: drift 32s var(--ease) infinite alternate;
  will-change: transform;
}

.backdrop__scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(115% 85% at 24% 40%, rgba(11, 13, 15, 0) 0%, rgba(11, 13, 15, .42) 55%, rgba(11, 13, 15, .78) 100%),
    linear-gradient(180deg, rgba(11, 13, 15, .55) 0%, rgba(11, 13, 15, .2) 40%, rgba(11, 13, 15, .72) 100%);
}

.orb {
  position: absolute;
  width: 46vmax; height: 46vmax;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .32;
  will-change: transform;
}

.orb--gold {
  background: radial-gradient(circle, rgba(217, 178, 106, .55), transparent 68%);
  top: -14vmax; right: -12vmax;
  animation: float-a 22s ease-in-out infinite alternate;
}

.orb--teal {
  background: radial-gradient(circle, rgba(47, 127, 140, .55), transparent 68%);
  bottom: -18vmax; left: -14vmax;
  animation: float-b 26s ease-in-out infinite alternate;
}

.backdrop__dust { position: absolute; inset: 0; width: 100%; height: 100%; }

@keyframes drift {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.14) translate3d(-1.5%, -1.5%, 0); }
}
@keyframes float-a {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-8vmax, 6vmax, 0); }
}
@keyframes float-b {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(7vmax, -5vmax, 0); }
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.stage {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 40px 20px;
}

.card {
  width: min(760px, 100%);
  text-align: center;
  padding: clamp(32px, 5vw, 60px) clamp(22px, 5vw, 62px);
  background: var(--glass);
  backdrop-filter: blur(22px) saturate(120%);
  -webkit-backdrop-filter: blur(22px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 22px;
  box-shadow:
    0 40px 90px -30px rgba(0, 0, 0, .85),
    inset 0 1px 0 rgba(255, 255, 255, .08);
  position: relative;
  overflow: hidden;
}

/* hairline of gold travelling across the top edge */
.card::before {
  content: "";
  position: absolute; top: 0; left: 0;
  height: 1px; width: 40%;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  animation: edge 7s linear infinite;
}
@keyframes edge {
  from { transform: translateX(-100%); }
  to   { transform: translateX(350%); }
}

/* staggered entrance */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  animation: rise .9s var(--ease) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes rise {
  to { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Logo
   -------------------------------------------------------------------------- */

.logo { position: relative; display: inline-block; overflow: hidden; }

.logo__img {
  width: clamp(190px, 42vw, 290px);
  height: auto;
  display: block;
  filter: brightness(0) invert(1);
  opacity: .96;
}

.logo__shine {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 46%, rgba(217, 178, 106, .5) 50%, transparent 54%);
  transform: translateX(-120%);
  animation: shine 6s ease-in-out 1.4s infinite;
  mix-blend-mode: screen;
  pointer-events: none;
}
@keyframes shine {
  0%        { transform: translateX(-120%); }
  32%, 100% { transform: translateX(120%); }
}

/* --------------------------------------------------------------------------
   Eyebrow
   -------------------------------------------------------------------------- */

.eyebrow {
  margin: 30px 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--gold-soft);
}

.eyebrow__rule {
  height: 1px; width: clamp(24px, 8vw, 62px);
  background: linear-gradient(90deg, transparent, var(--line));
}
.eyebrow__rule:last-child { transform: scaleX(-1); }

.eyebrow__dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--gold);
  animation: pulse 2.4s ease-in-out infinite;
}
.eyebrow__dot:last-of-type { animation-delay: 1.2s; }
@keyframes pulse {
  0%, 100% { opacity: .35; transform: scale(.8); }
  50%      { opacity: 1;   transform: scale(1.25); }
}

/* --------------------------------------------------------------------------
   Headline & copy
   -------------------------------------------------------------------------- */

.headline {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2rem, 6.2vw, 3.5rem);
  line-height: 1.15;
  letter-spacing: .01em;
  margin-bottom: 20px;
}

.headline em {
  font-style: italic;
  font-weight: 500;
  background: linear-gradient(100deg, var(--gold) 20%, var(--gold-soft) 45%, var(--gold) 70%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sweep 7s linear infinite;
  padding-right: .09em;   /* italic overhang would otherwise be clipped */
  margin-right: -.09em;
}
@keyframes sweep {
  from { background-position: 180% 0; }
  to   { background-position: -80% 0; }
}

.lede {
  font-size: clamp(.94rem, 2.2vw, 1.04rem);
  font-weight: 300;
  line-height: 1.75;
  color: var(--text-dim);
  max-width: 50ch;
  margin: 0 auto 42px;
}

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

.countdown {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(6px, 1.6vw, 16px);
  margin-bottom: 44px;
}

.unit { display: flex; flex-direction: column; align-items: center; gap: 10px; }

.unit__face {
  position: relative;
  min-width: clamp(64px, 16vw, 96px);
  padding: clamp(12px, 2.6vw, 20px) clamp(8px, 2vw, 14px);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .025));
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
  overflow: hidden;
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease);
}

.unit__face::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 50%;
  height: 1px;
  background: rgba(0, 0, 0, .28);
}

.unit__value {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.9rem, 6vw, 3rem);
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

/* digit roll on change (JS toggles .is-ticking) */
.unit__face.is-ticking .unit__value { animation: roll .55s var(--ease); }
.unit__face.is-ticking {
  border-color: rgba(217, 178, 106, .4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 22px -6px rgba(217, 178, 106, .5);
}
@keyframes roll {
  0%   { transform: translateY(-58%); opacity: 0; filter: blur(3px); }
  55%  { opacity: 1; filter: blur(0); }
  100% { transform: translateY(0); }
}

.unit__label {
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.unit__sep {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 4vw, 2.2rem);
  line-height: 1;
  color: var(--gold);
  opacity: .55;
  padding-top: clamp(14px, 3vw, 24px);
  animation: blink 2s steps(1, end) infinite;
}
@keyframes blink {
  0%, 49%   { opacity: .55; }
  50%, 100% { opacity: .12; }
}

/* live state, swapped in when the clock hits zero */
.countdown.is-live {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 5vw, 2.4rem);
  letter-spacing: .04em;
  color: var(--gold-soft);
}

/* --------------------------------------------------------------------------
   Sign-up
   -------------------------------------------------------------------------- */

.signup { margin-bottom: 40px; }

#subscribe-form {
  display: flex;
  gap: 10px;
  justify-content: center;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
#subscribe-form.is-done {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  position: absolute;
  visibility: hidden;
}

.field { position: relative; flex: 1 1 340px; max-width: 380px; }

.field input {
  width: 100%;
  padding: 16px 22px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .05);
  color: var(--text);
  font-family: inherit;
  font-size: .92rem;
  outline: none;
  transition: border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}

.field input:hover { border-color: rgba(255, 255, 255, .3); }

.field input:focus {
  border-color: var(--gold);
  background: rgba(255, 255, 255, .08);
  box-shadow: 0 0 0 4px rgba(217, 178, 106, .14);
}

.field label {
  position: absolute;
  left: 22px; top: 50%;
  transform: translateY(-50%);
  font-size: .92rem;
  font-weight: 300;
  color: var(--text-dim);
  pointer-events: none;
  transition: all .25s var(--ease);
}

.field input:focus + label,
.field input:not(:placeholder-shown) + label {
  top: 0;
  left: 18px;
  transform: translateY(-50%) scale(.82);
  padding: 0 8px;
  border-radius: 999px;
  background: #14171a;
  color: var(--gold-soft);
  letter-spacing: .04em;
}

.btn {
  position: relative;
  overflow: hidden;
  padding: 16px 34px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  color: #1a1408;
  font-family: inherit;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -12px rgba(217, 178, 106, .7);
}
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 3px; }

.btn__sheen {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .6) 50%, transparent 60%);
  transform: translateX(-120%);
  animation: shine 5.5s ease-in-out 2s infinite;
}

.message, .error {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: .9rem;
  font-weight: 300;
}

.message.is-visible, .error.is-visible {
  display: flex;
  animation: rise .6s var(--ease) both;
}

.message { color: var(--gold-soft); }
.error { color: #e9a3a3; margin-top: 12px; }

.message__tick {
  width: 20px; height: 20px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 26;
  stroke-dashoffset: 26;
}
.message.is-visible .message__tick { animation: draw .6s var(--ease) .15s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* --------------------------------------------------------------------------
   Social & footer
   -------------------------------------------------------------------------- */

.social {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-bottom: 28px;
}

.social a {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .14);
  color: var(--text);
  transition: transform .3s var(--ease), border-color .3s var(--ease),
              background .3s var(--ease), color .3s var(--ease);
}

.social a svg { width: 18px; height: 18px; fill: currentColor; }

.social a:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  background: rgba(217, 178, 106, .14);
  color: var(--gold-soft);
}
.social a:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 3px; }

.footnote {
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(244, 241, 236, .38);
}

/* --------------------------------------------------------------------------
   Responsive — layout
   -------------------------------------------------------------------------- */

@media (max-width: 620px) {
  .stage { padding: 22px 14px; align-items: start; }
  .card { border-radius: 18px; }

  /* tighten the rhythm so the whole page sits close to one screen */
  .eyebrow   { margin: 22px 0 14px; }
  .headline  { margin-bottom: 16px; }
  .lede      { margin-bottom: 30px; line-height: 1.65; }
  .countdown { margin-bottom: 30px; }
  .signup    { margin-bottom: 28px; }
  .social    { margin-bottom: 20px; }

  /* one row of four keeps the card short enough to sit under the photo band */
  .countdown {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }
  .unit__sep { display: none; }
  .unit__face { width: 100%; min-width: 0; padding: 12px 4px; }
  .unit__value { font-size: 1.65rem; }
  .unit__label { font-size: .52rem; letter-spacing: .12em; }

  /* column layout: flex-basis would become a height, so opt out */
  #subscribe-form { flex-direction: column; align-items: stretch; }
  .field { flex: 0 0 auto; max-width: none; }
  .btn { width: 100%; }

  .eyebrow { letter-spacing: .22em; font-size: .66rem; }
}

@media (max-width: 380px) {
  .social { gap: 10px; }
  .social a { width: 40px; height: 40px; }
}

/* --------------------------------------------------------------------------
   Responsive — art direction

   background.webp is a 1920x600 banner (3.2:1). On a portrait screen `cover`
   scales it to the viewport height, so only ~15-25% of its width survives the
   crop and the model sits behind the card. Portrait screens therefore get
   background-mobile.webp — a 700x600 crop framed on her — shown as a band
   across the top, with the content card sitting below it.
   -------------------------------------------------------------------------- */

@media (orientation: portrait) and (max-width: 1024px) {
  .backdrop__image {
    inset: -3% -3% auto -3%;
    height: 50svh;
    background-image: url('background-mobile.webp');
    background-position: center 14%;
    transform: scale(1.02);
    animation: drift-band 30s var(--ease) infinite alternate;

    /* Fade the band out on the image itself. Masking the element rather than
       stacking an opaque gradient on top keeps the fade locked to the band's
       own box, so no seam can appear when svh and vh disagree (mobile
       browsers resize the viewport as the address bar hides). */
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgba(0, 0, 0, .35) 82%, transparent 97%);
            mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgba(0, 0, 0, .35) 82%, transparent 97%);
  }

  .backdrop__scrim {
    background: linear-gradient(180deg,
      rgba(11, 13, 15, .34) 0%,
      rgba(11, 13, 15, .12) 22%,
      rgba(11, 13, 15, .38) 40%,
      rgba(11, 13, 15, .62) 52%);
  }

  .orb { opacity: .22; }

  /* drop the card clear of her face */
  .stage { align-items: start; padding-top: 42svh; }
}

@keyframes drift-band {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.09) translate3d(0, -1.5%, 0); }
}

/* Tablet portrait has room for a taller band and a slightly lower card. */
@media (orientation: portrait) and (min-width: 621px) and (max-width: 1024px) {
  .backdrop__image { height: 54svh; }
  .stage { padding-top: 44svh; }
}

/* Short landscape screens (phones turned sideways). The wide banner is the
   right asset here, but a full-width card would sit straight on top of the
   model — so narrow it, push it right, and let her hold the left third. */
@media (orientation: landscape) and (max-height: 540px) {
  .backdrop__image { background-position: 16% center; }

  .stage {
    align-items: start;
    justify-items: end;
    padding: 20px 24px;
  }

  .card { width: min(540px, 100%); padding: 24px 30px; }

  .logo__img { width: 150px; }
  .eyebrow   { margin: 14px 0 10px; font-size: .6rem; letter-spacing: .2em; }
  .headline  { font-size: 1.85rem; margin-bottom: 12px; }
  .lede      { font-size: .86rem; line-height: 1.6; margin-bottom: 20px; }
  .countdown { gap: 8px; margin-bottom: 20px; }
  .unit__face  { min-width: 58px; padding: 10px 6px; }
  .unit__value { font-size: 1.5rem; }
  .unit__label { font-size: .52rem; letter-spacing: .12em; }
  .unit__sep   { display: none; }
  .signup      { margin-bottom: 18px; }
  .social      { gap: 10px; margin-bottom: 14px; }
  .social a    { width: 38px; height: 38px; }
}

/* --------------------------------------------------------------------------
   Motion preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .backdrop__dust { display: none; }
}