/* GlorySmile — Ritual page ("how it works").
   Scoped under body[data-page='ritual']. Mobile first; desktop at 900px.
   The bold moment of the page is the three-step sequence (huge thin numerals). */

body[data-page='ritual'] {
  --ivory: #EFE2B8;           /* demo only: a warm, yellow-tinted white */
  --cool: #F9FAFE;            /* demo only: the neutral, cool white it becomes */
  --glow-a: rgba(61, 139, 255, 0.45);
}

/* ======================================================================
   1. Hero — mega word left, arch portrait right (stacked on phones)
   ====================================================================== */
.r-hero {
  display: grid;
  gap: clamp(1.75rem, 5vw, 3rem);
  padding-block: clamp(1.5rem, 5vw, 3.5rem) clamp(4rem, 9vw, 7rem);
  overflow-x: clip;                     /* halo ring may reach past the gutter on phones */
}
.r-hero__text { container-type: inline-size; }
.r-hero__title {
  font-weight: 200;
  font-size: min(23cqi, 15rem);         /* "Ритуал" spans its column at every width */
  letter-spacing: -0.06em;
  line-height: 0.86;
  margin-left: -0.05em;                 /* optical: align the stem of "Р" with the gutter */
}
.r-hero__line {
  margin-top: clamp(1rem, 2.4vw, 1.75rem);
  font-size: var(--t-l);
  line-height: 1.35;
  color: var(--ink-2);
  max-width: 24ch;
}

/* Step index: three macro circles that jump to the steps below */
.r-index {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem;
  margin-top: clamp(1.75rem, 4vw, 3rem);
}
.r-index a {
  display: grid; justify-items: start; gap: 0.6rem;
  min-height: 48px; text-decoration: none; font-weight: 600; font-size: var(--t-s);
}
.r-index .frame { width: 52px; height: 52px; flex: none; transition: transform 0.4s var(--ease); }
/* One row once the text column is wide enough (container = .r-hero__text) */
@container (min-width: 600px) {
  .r-index { display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; }
  .r-index a { display: inline-flex; align-items: center; gap: 0.75rem; font-size: var(--t-m); }
}
.r-index a:hover .frame { transform: scale(1.08); }
.r-index a:hover > span:last-child { text-decoration: underline; }
.r-index__n { font-family: var(--f-display); font-weight: 300; color: var(--ultra); margin-right: 0.15em; }

.r-hero__media { position: relative; width: 86%; max-width: 440px; justify-self: center; margin-top: 1.5rem; }
.r-hero__arch { aspect-ratio: 2 / 3; position: relative; z-index: 1; }
.r-hero__arch img { object-position: 30% 20%; }
/* Halo ring centred on the arch's round top: 116% of the arch width */
.r-hero__halo {
  --ring: 1.5px;
  position: absolute; z-index: 0;
  left: -8%; top: -5.333%;              /* -8% of width = -5.333% of a 2:3 height */
  width: 116%;
}

@media (min-width: 900px) {
  .r-hero {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: clamp(3rem, 6vw, 7rem);
    min-height: calc(100svh - var(--header-h));
    padding-block: clamp(3.5rem, 7vh, 5rem) clamp(2.5rem, 6vh, 4.5rem);
  }
  .r-hero__text { padding-bottom: 0.5rem; }
  .r-hero__media {
    /* height-led: the arch fills the first screen without pushing the fold */
    width: min(36vw, calc((100svh - var(--header-h) - 10rem) * 2 / 3));
    min-width: 300px; max-width: 640px;
    margin: 0 calc(var(--gutter) * 0.4) 0 0;   /* keep the halo inside the viewport */
  }
}

/* ======================================================================
   2. The three steps — wide rows, huge thin numerals, alternating sides
   ====================================================================== */
.r-steps { overflow-x: clip; }
.r-steps__list {
  list-style: none;
  display: grid; gap: clamp(6rem, 13vw, 12rem);
  padding-block: clamp(2rem, 5vw, 4rem) var(--section);
}
.step { display: grid; gap: clamp(2rem, 6vw, 3rem); align-items: center; }

.step__media { position: relative; width: 100%; max-width: 520px; justify-self: center; }
.step__circle { width: 100%; }
.step__circle img { transition: transform 0.9s var(--ease); }
.step__media:hover .step__circle img { transform: scale(1.04); }

/* Pairs: a big circle plus a smaller one tucked into its lower corner */
.step__media--pair { padding-bottom: 14%; }
.step__media--pair .step__circle:first-child { width: 84%; }
.step__circle--sub {
  position: absolute; right: 0; bottom: 0;
  width: 46%;
  box-shadow: 0 0 0 clamp(6px, 1vw, 12px) var(--enamel);   /* enamel gap ring between the two circles */
}
.step--flip .step__media--pair .step__circle:first-child { margin-left: auto; }
.step--flip .step__circle--sub { right: auto; left: 0; }
/* LED macro: the only glow on the page outside the dark band, kept to its own circle */
.step__circle--glow {
  background: var(--night);
  box-shadow: 0 0 0 clamp(6px, 1vw, 12px) var(--enamel), 0 0 70px 8px var(--glow-a);
}

.step__n {
  display: block;
  font-family: var(--f-display); font-weight: 200;
  font-size: clamp(7.5rem, 30vw, 17rem);
  line-height: 0.74; letter-spacing: -0.07em;
  margin-left: -0.06em;
  color: var(--ink);
}
.step__title {
  margin-top: clamp(1rem, 2.5vw, 2rem);
  font-size: var(--t-2xl);
  font-weight: 300;
}
.step__text {
  margin-top: 1rem;
  font-size: var(--t-l); line-height: 1.4;
  color: var(--ink-2);
  max-width: 30ch;
}

@media (min-width: 900px) {
  .step { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(3rem, 7vw, 8rem); }
  .step--flip .step__media { order: 2; }
  .step__media { max-width: 600px; }
  .step__n { font-size: clamp(9rem, 17vw, 17rem); }
}

/* Product picks: small tile-like rows (packshot · name + price · round add) */
.picks {
  list-style: none; padding: 0;
  display: grid; gap: 0.75rem;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  max-width: 460px;
}
.pick {
  position: relative;
  display: flex; align-items: center; gap: 1rem;
  padding: 0.5rem 0.6rem 0.5rem 0.5rem;
  border-radius: var(--r-pill);
  background: var(--pearl);
  border: 1.5px solid var(--pearl);
  transition: border-color 0.25s var(--ease);
}
.pick:hover { border-color: var(--ink); }
.pick__img { width: 68px; height: 68px; flex: none; }
.pick__img img { transform: scale(1.3); transition: transform 0.8s var(--ease); }
.pick:hover .pick__img img { transform: scale(1.36); }
.pick__meta { display: grid; gap: 0.1rem; margin-right: auto; min-width: 0; line-height: 1.25; }
.pick__name { font-weight: 600; text-decoration: none; }
.pick__name::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }   /* whole row is the link */
.pick__name:focus-visible { outline: none; }
.pick:has(.pick__name:focus-visible) { outline: 3px solid var(--ultra); outline-offset: 3px; }
.pick__price { font-size: var(--t-s); color: var(--ink-2); }
.pick .icon-btn { position: relative; z-index: 1; }

/* LED pick lives in the dark room */
.pick--night { background: var(--night); border-color: var(--night); color: var(--pearl); }
.pick--night:hover { border-color: var(--glow); }
.pick--night .pick__price { color: rgba(242, 244, 249, 0.7); }
.pick--night .pick__img { box-shadow: 0 0 0 2px var(--glow), 0 0 22px var(--glow-a); }
.pick--night:has(.pick__name:focus-visible) { outline-color: var(--pearl); }
.pick--night .icon-btn--ultra:hover { background: var(--pearl); color: var(--ink); border-color: var(--pearl); }

/* "или" between the two whitening options */
.picks__or {
  display: flex; align-items: center; gap: 1rem;
  padding-inline: 1.5rem;
  font-size: var(--t-s); color: var(--ink-2);
}
.picks__or::before, .picks__or::after { content: ''; flex: 1; height: 1px; background: var(--mist); }

/* ======================================================================
   3. Why violet — two discs meet; their overlap turns cool white
   ====================================================================== */
.r-tint { overflow-x: clip; padding-block: var(--section); border-top: 1px solid var(--mist); }
.r-tint__in { display: grid; justify-items: center; text-align: center; }
.r-tint__title { font-size: clamp(2.25rem, 7vw, 5.5rem); max-width: 12ch; }
.r-tint__text {
  margin-top: 1.25rem;
  font-size: var(--t-l); line-height: 1.4; color: var(--ink-2);
  max-width: 34ch;
}

.tint {
  /* --v (0…1) comes from the section; JS writes it from the slider */
  --d: clamp(240px, 64vw, 440px);
  --gap: calc((1 - var(--v)) * 100%);   /* violet disc offset, in % of one disc */
  position: relative;
  width: calc(var(--d) * 2); height: var(--d);
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  margin-inline: calc(50% - var(--d));  /* centred even when wider than the column (bleeds on phones) */
  align-self: start;
  justify-self: start;
}
.tint__disc {
  position: absolute; top: 0; left: 0;
  width: var(--d); height: var(--d); border-radius: 50%;
  /* both discs travel toward the centre; at --v:1 they coincide in the middle */
  transform: translateX(calc(var(--v) * 50%));
  transition: transform 0.18s linear;
}
.tint__disc--warm { background: var(--ivory); box-shadow: inset 0 0 0 1px rgba(26, 20, 56, 0.06); }
.tint__disc--violet,
.tint__disc--edge { transform: translateX(calc(100% - var(--v) * 50%)); }
.tint__disc--violet { background: color-mix(in srgb, var(--ultra) 30%, var(--pearl)); }
.tint__disc--edge { border: 1.5px solid color-mix(in srgb, var(--ultra) 55%, transparent); pointer-events: none; }
/* Lens = warm disc ∩ violet disc. The parent clips to the warm disc, the child is the violet disc. */
.tint__disc--lens { overflow: hidden; }
.tint__disc--lens > span {
  position: absolute; inset: 0; border-radius: 50%;
  background: var(--cool);
  transform: translateX(var(--gap));
  transition: transform 0.18s linear;
}

.r-tint__control {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1.25rem;
  width: min(100%, 520px);
  margin-top: clamp(2rem, 5vw, 3.5rem);
  padding: 0.5rem 1.4rem 0.5rem 1.6rem;
  min-height: 64px;
  border-radius: var(--r-pill);
  background: var(--pearl);
}
.r-tint__label { font-weight: 600; }

/* Range: pill track filled in violet up to the thumb */
.r-tint__range {
  --p: calc(var(--v) * 100%);
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 44px; margin: 0;
  background: transparent; cursor: pointer;
}
.r-tint__range:focus-visible { outline: none; }
.r-tint__control:has(.r-tint__range:focus-visible) { outline: 3px solid var(--ultra); outline-offset: 3px; }
.r-tint__range::-webkit-slider-runnable-track {
  height: 6px; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--ultra) 0 var(--p), var(--mist) var(--p) 100%);
}
.r-tint__range::-moz-range-track { height: 6px; border-radius: var(--r-pill); background: var(--mist); }
.r-tint__range::-moz-range-progress { height: 6px; border-radius: var(--r-pill); background: var(--ultra); }
.r-tint__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 30px; height: 30px; margin-top: -12px; border-radius: 50%;
  background: var(--pearl); border: 2px solid var(--ultra);
  box-shadow: 0 4px 14px rgba(90, 43, 255, 0.28);
  transition: transform 0.2s var(--ease);
}
.r-tint__range::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--pearl); border: 2px solid var(--ultra);
  box-shadow: 0 4px 14px rgba(90, 43, 255, 0.28);
}
.r-tint__range:active::-webkit-slider-thumb { transform: scale(1.12); }

/* ======================================================================
   4. LED — full-bleed night band, glow stays inside it
   ====================================================================== */
.r-led {
  background: var(--night); color: var(--pearl);
  padding-block: var(--section);
  overflow-x: clip;
}
.r-led__in { display: grid; gap: clamp(3rem, 8vw, 4rem); align-items: center; }
.r-led__media { position: relative; width: min(78%, 460px); justify-self: center; margin-top: 8%; }
.r-led__arch { aspect-ratio: 2 / 3; position: relative; z-index: 1; background: var(--night); }
.r-led__arch img { object-position: 35% 40%; }
.r-led__ring {
  position: absolute; z-index: 0;
  left: -12%; top: -8%; width: 124%; aspect-ratio: 1;     /* centred on the arch top, like the hero halo */
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--glow) 85%, transparent);
  box-shadow: 0 0 60px var(--glow-a), inset 0 0 60px rgba(61, 139, 255, 0.22);
  pointer-events: none;
}
.r-led__title { font-size: var(--t-2xl); }
.r-led__text {
  margin-top: 1.25rem;
  font-size: var(--t-l); line-height: 1.4;
  color: rgba(242, 244, 249, 0.74);
  max-width: 30ch;
}
.r-led__price { margin-top: clamp(1.75rem, 4vw, 2.75rem); font-size: var(--t-xl); }
.r-led__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 1.25rem; }
.r-led__link {
  display: inline-flex; align-items: center; min-height: 48px;
  font-weight: 600; text-underline-offset: 0.3em;
}
.r-led__link:hover { color: var(--glow); }

@media (min-width: 900px) {
  .r-led__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(3rem, 7vw, 8rem); }
  .r-led__media { width: min(100%, 440px); }
}

/* ======================================================================
   5. FAQ
   ====================================================================== */
.r-faq { padding-block: var(--section); }
.r-faq__in { display: grid; gap: clamp(2rem, 5vw, 3rem); }
.r-faq__title { font-size: clamp(3rem, 7vw, 6.5rem); }
.r-faq__more { margin-top: 1rem; color: var(--ink-2); }
.r-faq__more a { color: var(--ink); font-weight: 600; }
.r-faq__acc details > div p { max-width: 54ch; }
.r-faq__acc a { color: var(--ink); font-weight: 600; }

@media (min-width: 900px) {
  .r-faq__in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(3rem, 7vw, 8rem); align-items: start; }
  .r-faq__head { position: sticky; top: calc(var(--header-h) + 2rem); }
}

/* ======================================================================
   6. Final CTA — the whole ritual inside a halo
   ====================================================================== */
.r-kit { padding-block: clamp(2rem, 4vw, 3rem) var(--section); overflow-x: clip; }
.r-kit__in { display: grid; justify-items: center; text-align: center; }
.r-kit__media { position: relative; width: min(84vw, 560px); aspect-ratio: 1; display: grid; place-items: center; }
.r-kit__halo { --ring: 2px; position: absolute; inset: 0; width: 100%; }
.r-kit__shot { width: 84%; }
.r-kit__shot img { transition: transform 0.9s var(--ease); }
.r-kit__media:hover .r-kit__shot img { transform: scale(1.04); }
.r-kit__title { margin-top: clamp(2rem, 5vw, 3.5rem); font-size: var(--t-3xl); font-weight: 200; letter-spacing: -0.05em; }
.r-kit__text { margin-top: 1rem; font-size: var(--t-l); line-height: 1.4; color: var(--ink-2); max-width: 30ch; }
.r-kit__buy { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 1.75rem; margin-top: clamp(1.75rem, 4vw, 2.5rem); }
.r-kit__price { font-size: var(--t-xl); }

/* ---------- Motion safety ---------- */
@media (prefers-reduced-motion: reduce) {
  .tint__disc, .tint__disc--lens > span { transition: none; }
}