/* Rang Grace — Coming Soon */

:root {
  /* Teal / Peacock Blue packaging (brand/theme.jpeg), gold wordmark and
     saffron sun from the logo (brand/Svg/Rang grace.svg) */
  --teal-deep: #01484E;
  --teal: #05595F;
  --teal-glow: #126C75;
  --gold: #C9A85B;
  --gold-light: #E3CB97;
  --gold-deep: #A88A49;
  --saffron: #FFA900;
  --saffron-soft: rgba(255, 169, 0, 0.6);
  --cream: #F3E9D2;
  --cream-soft: #C9D6D0;

  --font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans: "Jost", "Helvetica Neue", Arial, sans-serif;

  color-scheme: dark;
}

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

html,
body {
  margin: 0;
  height: 100%;
}

body {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  background:
    radial-gradient(ellipse 55% 42% at 50% 40%, rgba(18, 108, 117, 0.55), transparent 70%),
    radial-gradient(ellipse 120% 95% at 50% 40%, transparent 50%, rgba(1, 72, 78, 0.95) 100%),
    var(--teal);
  background-attachment: fixed;
  color: var(--cream);
  font-family: var(--font-sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* ---------- Background scene ---------- */

.petals {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.arch {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  height: 90vh;
  height: 90svh;
  /* 2:3 like the viewBox on wide screens; stretches taller on phones */
  width: min(92vw, 60vh);
  width: min(92vw, 60svh);
  pointer-events: none;
  z-index: 0;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1;
}

.arch path {
  vector-effect: non-scaling-stroke;
  opacity: 0.45;
}

.arch .arch__inner {
  opacity: 0.225;
}

/* full opacity so the saffron doesn't muddy into the teal */
.arch .arch__gem {
  fill: var(--saffron);
  stroke: none;
  opacity: 0.9;
}

/* Gold leaf sprigs in the bottom corners, as on the carry bag */
.leaves {
  position: fixed;
  bottom: 0;
  width: clamp(110px, 20vw, 260px);
  height: auto;
  pointer-events: none;
  z-index: 0;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.75;
}

.leaves--left {
  left: 0;
}

.leaves--right {
  right: 0;
  transform: scaleX(-1);
}

/* ---------- Hero ---------- */

/* Phones and tablets: logo, photo slider, then the words, in one column.
   Sizes lean on svh so it all fits on one screen. */
.hero {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 4svh, 56px) 16px 16px;
  text-align: center;
}

.hero__logo {
  margin: 0;
  line-height: 0;
}

.logo {
  width: min(420px, 66vw, 34svh);
  height: auto;
  overflow: visible;
}

.logo__ink {
  fill: var(--gold);
}

.logo__rays {
  fill: var(--saffron);
  transform-box: view-box;
  transform-origin: 302px 184px;
  animation: breathe 5s ease-in-out infinite;
}

.hero__text {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__status {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: clamp(20px, 4svh, 40px) 0 0;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--gold-light);
  /* balance the trailing letter-spacing so the text sits optically centred */
  padding-left: 0.5em;
}

.hero__status::before,
.hero__status::after {
  content: "";
  width: 44px;
  height: 1px;
  background: linear-gradient(to right, var(--gold), var(--saffron-soft));
}

.hero__status::after {
  margin-left: -0.5em;
  background: linear-gradient(to left, var(--gold), var(--saffron-soft));
}

.hero__tagline {
  margin: clamp(12px, 2svh, 20px) 0 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(26px, 4.2vw, 40px);
  line-height: 1.2;
  color: var(--cream);
}

.hero__sub {
  max-width: 44ch;
  margin: 14px 0 0;
  font-size: clamp(14px, 1.6vw, 16px);
  letter-spacing: 0.04em;
  line-height: 1.6;
  color: var(--cream-soft);
}

/* ---------- Glimpse slider ---------- */

.glimpse {
  margin-top: clamp(20px, 4svh, 40px);
  width: clamp(140px, 24svh, 300px);
}

/* Arched frame with a thin gold outline, echoing the double arch behind */
.glimpse__arch {
  position: relative;
  padding: 8px;
  border: 1px solid rgba(201, 168, 91, 0.45);
  border-radius: 50% 50% 0 0 / 30% 30% 0 0;
}

/* saffron gem at the apex, as on the background arch */
.glimpse__arch::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 9px;
  height: 9px;
  background: var(--saffron);
  opacity: 0.9;
  transform: translate(-50%, -50%) rotate(45deg);
}

.glimpse__frame {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 50% 50% 0 0 / 30% 30% 0 0;
  background: var(--teal-deep);
  /* horizontal swipes go to the slider, vertical ones still scroll */
  touch-action: pan-y;
}

/* Slides cross-fade; the incoming photo settles from a slight zoom */
.glimpse__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.glimpse__slide.is-active {
  opacity: 1;
}

.glimpse__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transition: transform 6s cubic-bezier(0.22, 1, 0.36, 1);
}

.glimpse__slide.is-active img {
  transform: none;
}

.glimpse__dots {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 10px;
}

.glimpse__dots[hidden] {
  display: none;
}

.glimpse__dot {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.glimpse__dot::before {
  content: "";
  width: 7px;
  height: 7px;
  border: 1px solid var(--gold);
  transform: rotate(45deg);
  transition: background-color 0.4s ease, border-color 0.4s ease;
}

.glimpse__dot[aria-current="true"]::before {
  background: var(--saffron);
  border-color: var(--saffron);
}

.glimpse__dot:hover::before {
  border-color: var(--saffron);
}

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

/* Wide screens: logo and words on the left, photo slider on the right. The
   slider's own arch and gem stand in for the centred background arch, which
   would otherwise cut between the two columns. */
@media (min-width: 900px) {
  .arch {
    display: none;
  }

  .hero {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas:
      "logo slider"
      "text slider";
    justify-content: center;
    align-content: center;
    column-gap: clamp(56px, 8vw, 128px);
    padding: 6vh 32px 16px;
  }

  .hero__logo {
    grid-area: logo;
    align-self: end;
  }

  .logo {
    width: min(420px, 34vw);
  }

  .hero__text {
    grid-area: text;
    align-self: start;
  }

  .hero__status {
    margin-top: clamp(32px, 6vh, 56px);
  }

  .glimpse {
    grid-area: slider;
    align-self: center;
    margin-top: 0;
    width: min(420px, 50svh);
  }
}

/* ---------- Footer ---------- */

.footer {
  position: relative;
  z-index: 1;
  padding: 16px 16px 24px;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--cream-soft);
}

.footer__email {
  display: inline-block;
  padding-bottom: 2px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--cream);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.footer__email:hover,
.footer__email:focus-visible {
  color: var(--saffron);
  border-color: var(--saffron);
  outline: none;
}

.footer__copy {
  margin: 8px 0 0;
}

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

.reveal {
  opacity: 0;
  animation: rise 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero__logo.reveal    { animation-delay: 0.2s; }
.glimpse.reveal       { animation-delay: 0.6s; }
.hero__status.reveal  { animation-delay: 0.9s; }
.hero__tagline.reveal { animation-delay: 1.2s; }
.hero__sub.reveal     { animation-delay: 1.5s; }
.footer.reveal        { animation-delay: 1.9s; }

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes breathe {
  0%, 100% {
    opacity: 0.88;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.035);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    animation: none;
  }

  .logo__rays {
    animation: none;
  }

  .petals {
    display: none;
  }

  .glimpse__slide,
  .glimpse__slide img {
    transition: none;
  }

  .glimpse__slide img {
    transform: none;
  }
}

/* ---------- Small screens ---------- */

@media (max-width: 480px) {
  .hero__status {
    gap: 12px;
    font-size: 11px;
    letter-spacing: 0.4em;
  }

  .hero__status::before,
  .hero__status::after {
    width: 28px;
  }

  .leaves {
    width: 64px;
    opacity: 0.5;
  }
}