/* ============================================================
   THE CIRCLE — rebuilt on the scroll-slide reference.

   Same wine room as the homepage: the ground, the veil and the
   accent palette all come from there, so the two pages read as
   one site at night.

   The centrepiece is a sticky stage holding three tier slides.
   Scroll drives a single progress value; each slide takes its
   copy drift, its background fade and its card's 3D rotation
   from that. Everything is scoped under body.cc.
   ============================================================ */

body.cc {
  --night: #17030a;
  --night-raised: #210610;
  --night-line: rgba(224, 205, 174, 0.16);
  --on-night: var(--ivory);
  --on-night-soft: rgba(246, 242, 236, 0.74);
  --on-night-faint: rgba(246, 242, 236, 0.46);

  background: var(--night);
  color: var(--on-night-soft);
}

body.cc .atmosphere { display: none; }
body.cc ::selection { background: var(--bordeaux-lift); color: var(--ivory); }

body.cc .btn-wine { background: var(--ivory); color: var(--bordeaux-deep); }
body.cc .btn-wine:hover { background: var(--paper); }
body.cc .btn-line { border-color: rgba(246, 242, 236, 0.42); color: var(--ivory); }
body.cc .btn-line:hover { border-color: var(--ivory); background: rgba(246, 242, 236, 0.09); }


/* ------------------------------------------------------------
   LANDING — before any tier is revealed
   ------------------------------------------------------------ */

.cc-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.cc-hero-media { position: absolute; inset: 0; z-index: 0; background: var(--night); }

.cc-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  opacity: 0.5;
}

.cc-hero-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(15, 2, 6, 0.8) 0%, rgba(15, 2, 6, 0.1) 26%, rgba(15, 2, 6, 0) 46%),
    linear-gradient(0deg, var(--night) 3%, rgba(23, 3, 10, 0.45) 36%, rgba(23, 3, 10, 0) 64%),
    linear-gradient(115deg, rgba(56, 7, 16, 0.5) 0%, rgba(110, 18, 37, 0.32) 45%, rgba(35, 5, 11, 0.6) 100%);
}

.cc-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 96rem;
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(3rem, 8vh, 6rem);
}

.cc-kicker {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--champagne);
}

.cc-hero-title {
  margin-top: 1.2rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3rem, 1.8rem + 6.4vw, 8rem);
  line-height: 0.95;
  color: var(--on-night);
}

.cc-hero-title em { font-style: italic; color: var(--champagne); }

.cc-hero-lede {
  margin-top: 1.6rem;
  max-width: 34rem;
  font-size: clamp(1rem, 0.94rem + 0.4vw, 1.2rem);
  color: var(--on-night-soft);
}

.cc-hero-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: clamp(2rem, 5vh, 3.5rem);
  padding-top: 1.4rem;
  border-top: 1px solid var(--night-line);
}

.cc-scroll-cue {
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--on-night-faint);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}

.cc-scroll-cue::after {
  content: "";
  width: 3.5rem;
  height: 1px;
  background: linear-gradient(90deg, var(--champagne), transparent);
  animation: ccCue 2.4s var(--ease-silk) infinite;
}

@keyframes ccCue { 0%,100% { opacity:.3; transform:scaleX(.6) } 50% { opacity:1; transform:scaleX(1) } }


/* ------------------------------------------------------------
   THE TIER SLIDES — sticky stage, scroll-driven
   ------------------------------------------------------------ */

.cc-slides { position: relative; }

/* one viewport of scroll per slide, plus one to land on the last */
.cc-slides-scroll { height: 400vh; position: relative; }

.cc-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  /* the cards live in this 3D space — without it they stay flat */
  perspective: 1400px;
  perspective-origin: 62% 50%;
}

/* One slide is live at a time and the rest are fully hidden — no
   crossfade band where two panes overlap, in either direction.
   `visibility` is transitioned alongside opacity so the outgoing pane
   stops being paintable the instant it is done. */
.cc-slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  max-width: 96rem;
  margin: 0 auto;
  padding: clamp(6rem, 14vh, 9rem) var(--gutter) clamp(3rem, 8vh, 5rem);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s linear, visibility 0s linear .22s;
}

.cc-slide.is-live {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .22s linear, visibility 0s linear 0s;
}

/* each slide carries its own film */
.cc-slide-media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--night);
}

.cc-slide-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.46;
}

.cc-slide-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(15, 2, 6, 0.78) 0%, rgba(15, 2, 6, 0.12) 28%, rgba(15, 2, 6, 0.1) 60%, rgba(15, 2, 6, 0.7) 100%),
    linear-gradient(100deg, rgba(23, 3, 10, 0.86) 0%, rgba(56, 7, 16, 0.5) 42%, rgba(110, 18, 37, 0.28) 72%, rgba(35, 5, 11, 0.6) 100%);
}

/* --- copy ------------------------------------------------- */

/* --dir is +1 when the pane arrives from below (scrolling on) and -1
   when it arrives from above (scrolling back), so the entry runs the
   right way round in both directions. */
.cc-copy {
  position: relative;
  z-index: 2;
  transform: translate3d(0, calc(var(--dir, 1) * 70px), 0);
  opacity: 0;
  transition: transform .5s var(--ease-silk), opacity .3s ease;
  will-change: transform, opacity;
}

.cc-slide.is-live .cc-copy { transform: none; opacity: 1; }

.cc-meta {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--champagne);
}

.cc-title {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 1.6rem + 5vw, 6.2rem);
  line-height: 0.98;
  color: var(--on-night);
}

.cc-rule {
  width: min(22rem, 60%);
  height: 1px;
  margin: 1.6rem 0 0;
  border: 0;
  background: linear-gradient(90deg, var(--champagne), rgba(224, 205, 174, 0));
}

.cc-price {
  margin-top: 1.5rem;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}

.cc-price strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem);
  line-height: 1;
  color: var(--champagne);
}

.cc-price span {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--on-night-faint);
}

.cc-perks {
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 26rem;
}

.cc-perks li {
  position: relative;
  padding-left: 1.2rem;
  font-size: 0.95rem;
  color: var(--on-night-soft);
}

.cc-perks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.45rem;
  height: 1px;
  background: var(--champagne);
}

.cc-more {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 2rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--on-night);
  border-bottom: 1px solid var(--champagne);
  padding-bottom: 0.4rem;
  transition: color var(--dur-mid) ease, gap var(--dur-mid) var(--ease-silk);
}

.cc-more:hover { color: var(--champagne); gap: 1rem; }

/* --- the rotating card ------------------------------------ */

.cc-card-wrap {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
}

.cc-card {
  width: min(26rem, 78%);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 4px;
  background: var(--night-raised);
  box-shadow: 0 50px 110px -40px rgba(0, 0, 0, 0.9);
  transform-style: preserve-3d;
  /* Tipped away and gone at rest; it turns square to the viewer as its
     pane becomes live. The pane it replaces is already hidden, so the
     two never share the frame. */
  transform:
    translate3d(0, calc(var(--dir, 1) * 170px), 0)
    rotateX(calc(var(--dir, 1) * 58deg))
    rotateZ(-4deg)
    scale(0.88);
  opacity: 0;
  transition: transform .62s var(--ease-silk), opacity .34s ease;
  will-change: transform, opacity;
}

.cc-slide.is-live .cc-card {
  transform: translate3d(0, 0, 0) rotateX(0deg) rotateZ(-4deg) scale(1);
  opacity: 1;
}

.cc-card img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cc-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(246, 242, 236, 0.06), rgba(23, 3, 10, 0.32));
}

/* progress rail down the right edge */
.cc-rail {
  position: absolute;
  right: clamp(1rem, 3vw, 2.5rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.cc-rail span {
  width: 1px;
  height: 2.2rem;
  background: rgba(246, 242, 236, 0.22);
  transition: background-color var(--dur-mid) ease, height var(--dur-mid) var(--ease-silk);
}

.cc-rail span.is-on { background: var(--champagne); height: 3.4rem; }


/* ------------------------------------------------------------
   THE REST OF THE PAGE — restyled onto the wine ground
   ------------------------------------------------------------ */

body.cc .section { max-width: 96rem; margin: 0 auto; padding: clamp(5rem, 12vh, 9rem) var(--gutter); }

body.cc .eyebrow { color: var(--champagne); }
body.cc .display { color: var(--on-night); }
body.cc .display em { color: var(--champagne); }
body.cc .lede { color: var(--on-night-soft); }

body.cc .steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); }
body.cc .step { border-top: 1px solid var(--night-line); padding-top: 1.4rem; }
body.cc .step-num { font-family: var(--font-display); font-size: 0.9rem; color: var(--champagne); }
body.cc .step h3 { margin-top: 0.7rem; font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; color: var(--on-night); }
body.cc .step p { margin-top: 0.5rem; color: var(--on-night-soft); font-size: 0.95rem; }

body.cc .includes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); }
body.cc .include { border-top: 1px solid var(--night-line); padding-top: 1.4rem; }
body.cc .include strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; color: var(--on-night); }
body.cc .include p { margin-top: 0.5rem; color: var(--on-night-soft); font-size: 0.95rem; }

body.cc .terms { max-width: 46rem; margin: 0 auto; }
body.cc .term { border-bottom: 1px solid var(--night-line); }
body.cc .term summary { padding: 1.15rem 0; cursor: pointer; list-style: none; color: var(--on-night); font-size: 1.02rem; }
body.cc .term summary::-webkit-details-marker { display: none; }
body.cc .term summary::after { content: "+"; float: right; color: var(--champagne); }
body.cc .term[open] summary::after { content: "\2013"; }
body.cc .term p { padding-bottom: 1.15rem; color: var(--on-night-soft); font-size: 0.95rem; }

body.cc .footer { background: transparent; border-top: 1px solid var(--night-line); color: rgba(246, 242, 236, 0.6); }
body.cc .footer-word { color: var(--ivory); }
body.cc .footer-note { color: rgba(246, 242, 236, 0.55); }
body.cc .footer-links a,
body.cc .footer-legal,
body.cc .footer-legal-links a { color: rgba(246, 242, 236, 0.6); }
body.cc .footer-links a:hover,
body.cc .footer-legal-links a:hover { color: var(--champagne); }
body.cc .badge-18 { border-color: rgba(224, 205, 174, 0.4); color: var(--champagne); }
body.cc .gate { background: rgba(15, 2, 6, 0.94); }


/* ------------------------------------------------------------
   NARROW
   ------------------------------------------------------------ */

@media (max-width: 900px) {
  /* The stage cannot hold a two-column slide at this width, so the
     tiers become ordinary stacked sections. Each keeps its film and
     its card; the card simply sits still. */
  .cc-slides-scroll { height: auto; }
  .cc-stage { position: static; height: auto; overflow: visible; perspective: none; }

  .cc-slide {
    position: relative;
    inset: auto;
    grid-template-columns: 1fr;
    min-height: 0;
    padding: clamp(3rem, 9vh, 5rem) var(--gutter);
    opacity: 1;
    pointer-events: auto;
  }

  .cc-slide-media { opacity: 1 !important; }

  .cc-copy { transform: none !important; opacity: 1 !important; }

  .cc-card {
    width: min(20rem, 74%);
    transform: none !important;
    opacity: 1 !important;
    margin-top: 2rem;
  }

  .cc-rail { display: none; }

  body.cc .steps,
  body.cc .includes { grid-template-columns: 1fr; }

  /* touch target: the tier link was 26px tall */
  .cc-more { padding: 0.9rem 0; margin-top: 1.5rem; }

  .cc-card { width: min(21rem, 78%); }

  /* the still is fixed to the viewport, so on a phone it wants the
     subject held higher in frame */
  .cc-tail-bg img { object-position: center 20%; }

  /* iOS gives fixed layers a hard time during momentum scrolling;
     letting it settle is cheaper than fighting it */
  .cc-tail-bg { transition: opacity .45s var(--ease-silk); }
}

@media (prefers-reduced-motion: reduce) {
  .cc-scroll-cue::after { animation: none; }
  .cc-card,
  .cc-copy { transition: opacity .2s linear; transform: none !important; }
}


/* ------------------------------------------------------------
   FIXED TAIL BACKGROUND
   Everything from How it works down to the footer sits over a
   still that does not scroll. Fixed to the viewport rather than
   attached to a wrapper, because it has to carry past </main>
   and behind the footer, and because background-attachment:fixed
   is unreliable on iOS.
   ------------------------------------------------------------ */

.cc-tail-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s var(--ease-silk);
}

body.cc-tail-on .cc-tail-bg { opacity: 1; }

.cc-tail-bg picture,
.cc-tail-bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 26%;
}

/* the still is violet, so the veil does more work here than usual —
   it has to pull the image back into the wine room */
.cc-tail-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, var(--night) 0%, rgba(23, 3, 10, 0.72) 18%, rgba(23, 3, 10, 0.68) 74%, var(--night) 100%),
    linear-gradient(110deg, rgba(23, 3, 10, 0.8) 0%, rgba(56, 7, 16, 0.6) 45%, rgba(110, 18, 37, 0.34) 100%);
}

/* content rides above the layer */
body.cc main,
body.cc .footer { position: relative; z-index: 1; }

/* The dollar figure is the familiar one, but Telegram bills in Stars --
   so the exact Star amount sits under it rather than being hidden until
   checkout. */
.cc-price-stars {
  margin-top: 0.55rem;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-night-soft);
}