/* ============================================================
   Halcyon — "Wow factor" prototype styles (index v2)
   Every feature is gated on body[data-tw-*] set by the Tweaks panel.
   ============================================================ */

/* ---------- 1. Motion polish (softer reveals) ---------- */
@media (prefers-reduced-motion: no-preference) {
  body[data-tw-polish="1"] .rv {
    transform: translateY(34px);
    filter: blur(7px);
    transition: opacity 1.05s var(--ease), transform 1.05s var(--ease), filter 1.05s var(--ease);
  }
  body[data-tw-polish="1"] .rv.in { transform: none; filter: blur(0); }
  body[data-tw-polish="1"] .hero-media { will-change: transform; }
}

/* ---------- Soft media settle on reveal (add .media-settle.rv around an img) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .media-settle { overflow: hidden; border-radius: var(--radius); }
  .media-settle > img, .media-settle > video { transform: scale(1.07); transition: transform 1.6s var(--ease); display: block; }
  .media-settle.in > img, .media-settle.in > video { transform: scale(1); }
}

/* ---------- 2. Breathing widget (CTA band) ---------- */
/* D-015: a sibling of .cta-band .wrap, deliberately oversized and cropped by the
   band's own overflow:hidden. Being cut off by the edge is what keeps it reading
   as part of the photograph — a cropped thing is never mistaken for a control,
   which is what went wrong when it sat inside the glass panel.

   z-index 2, not 1: it and .wrap both carried 1, so the later-in-DOM panel won.
   That was invisible until glass.css gave the panel a background, after which
   the widget was 60-100% covered.

   Ring/core insets are percentages so the rings keep their rhythm at any size,
   and opacities are lower than the original 230px version (.40/.55/.70 ->
   .30/.40/.52) because 360px of full-strength rings would compete with the copy. */
.breath {
  position: absolute; top: 50%; right: -110px; margin-top: -180px;
  width: 360px; height: 360px;
  z-index: 2; pointer-events: none;
}
.breath .ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.30);
}
.breath .ring:nth-child(2) { inset: 11.3%; border-color: rgba(255,255,255,.40); }
.breath .ring:nth-child(3) { inset: 22.6%; border-color: rgba(255,255,255,.52); }
.breath .core {
  position: absolute; inset: 33.9%; border-radius: 50%;
  background: rgba(255,255,255,.10); backdrop-filter: blur(2px);
  display: grid; place-items: center;
  color: #fff; font-size: .68rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
}
@media (prefers-reduced-motion: no-preference) {
  .breath .ring, .breath .core { animation: breathe 9s ease-in-out infinite; }
  .breath .ring:nth-child(2) { animation-delay: .35s; }
  .breath .ring:nth-child(3) { animation-delay: .7s; }
  @keyframes breathe {
    0%, 100% { transform: scale(.82); opacity: .55; }
    42%, 55% { transform: scale(1.06); opacity: 1; }
  }
}
body[data-tw-breathing="0"] .breath { display: none; }
@media (max-width: 1100px) { .breath { display: none; } }

/* "Moment of calm" link in CTA band */
body[data-tw-calm="0"] .calm-link { display: none; }

/* ---------- 3. Rotating headline word ---------- */
.rotate-word {
  display: inline-block; color: var(--teal); font-style: italic;
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.rotate-word.swap { opacity: 0; transform: translateY(12px); }

/* ---------- 4. Meet Julie (video welcome) ---------- */
body[data-tw-video="0"] #meet-julie { display: none; }
.meet-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 64px; align-items: center; }
.meet-grid .video-slot { order: 2; }
.video-slot {
  position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius);
  background: repeating-linear-gradient(45deg, var(--mint-soft) 0 14px, #ffffff 14px 28px);
  border: 1.5px dashed var(--line);
  display: grid; place-items: center; overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.video-slot .play {
  width: 84px; height: 84px; border-radius: 50%;
  background: rgba(255,255,255,.95); box-shadow: var(--shadow-md);
  display: grid; place-items: center; color: var(--teal); font-size: 1.5rem;
  padding-left: 6px; cursor: pointer;
  transition: transform .3s var(--ease);
}
.video-slot:hover .play { transform: scale(1.08); }
.video-slot .slot-note {
  position: absolute; bottom: 16px; left: 0; right: 0; text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .78rem; color: var(--ink-soft);
}
.meet-points { list-style: none; display: grid; gap: 12px; margin: 24px 0 30px; }
.meet-points li { display: flex; gap: 14px; align-items: baseline; color: var(--ink-soft); font-size: .98rem; }
.meet-points li::before { content: "—"; color: var(--teal); flex: none; }

/* ---------- 5. Testimonial carousel ---------- */
body[data-tw-testimonials="carousel"] .testi-grid { display: none; }
body[data-tw-testimonials="grid"] .testi-carousel { display: none; }
.testi-carousel { max-width: 800px; margin: 0 auto; text-align: center; position: relative; }
.testi-carousel .slides { position: relative; min-height: 300px; }
.testi-slide {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  transition: opacity 1.1s var(--ease);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
}
.testi-slide.active { opacity: 1; pointer-events: auto; }
.testi-slide .quote-mark {
  font-family: var(--serif); font-size: 4.4rem; line-height: .4;
  color: var(--mint); -webkit-text-stroke: 1px var(--teal); height: 34px;
}
.testi-slide p {
  font-family: var(--serif); font-style: italic; font-size: 1.34rem;
  line-height: 1.65; color: var(--ink); max-width: 46ch;
}
.testi-slide footer { display: flex; align-items: center; gap: 12px; margin-top: 26px; }
.testi-slide .avatar {
  width: 42px; height: 42px; border-radius: 50%; background: var(--green); color: #fff;
  display: grid; place-items: center; font-size: .8rem; font-weight: 600; letter-spacing: .04em;
}
.testi-slide .who { font-size: .84rem; color: var(--ink-soft); text-align: left; }
.testi-slide .who strong { display: block; color: var(--green); }
.testi-dots { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }
.testi-dots button {
  width: 9px; height: 9px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--line); padding: 0; transition: background .3s, transform .3s;
}
.testi-dots button.active { background: var(--teal); transform: scale(1.25); }

/* ---------- 6. Self-check quiz ---------- */
body[data-tw-quiz="0"] #self-check { display: none; }
.quiz-card {
  max-width: 720px; margin: 0 auto; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 48px 52px 44px;
}
.quiz-progress { display: flex; gap: 8px; margin-bottom: 28px; }
.quiz-progress span { height: 3px; flex: 1; border-radius: 3px; background: var(--line); transition: background .4s; }
.quiz-progress span.done { background: var(--teal); }
.quiz-q { font-family: var(--serif); font-size: 1.55rem; color: var(--green); line-height: 1.3; margin-bottom: 24px; }
.quiz-opts { display: grid; gap: 12px; }
.quiz-opts button {
  text-align: left; font-family: var(--sans); font-size: .98rem; color: var(--ink);
  background: var(--paper); border: 1.5px solid var(--line); border-radius: 12px;
  padding: 15px 20px; cursor: pointer;
  transition: border-color .25s, background .25s, transform .25s var(--ease);
}
.quiz-opts button:hover { border-color: var(--teal); background: var(--mint-soft); transform: translateX(4px); }
.quiz-note { font-size: .82rem; color: var(--ink-soft); margin-top: 24px; }
.quiz-result h3 { font-family: var(--serif); font-size: 1.7rem; color: var(--green); margin-bottom: 14px; }
.quiz-result p { margin-bottom: 22px; }
.quiz-result .btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
.quiz-restart {
  background: none; border: 0; color: var(--teal); font-weight: 600; font-size: .88rem;
  cursor: pointer; margin-top: 20px; padding: 0; font-family: var(--sans);
}
.quiz-step { animation: quizIn .5s var(--ease) both; }
@media (prefers-reduced-motion: reduce) { .quiz-step { animation: none; } }
@keyframes quizIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) { .quiz-card { padding: 32px 24px; } }

/* ---------- 7. Sticky call button ---------- */
.sticky-cta {
  position: fixed; right: 24px; bottom: 24px; z-index: 90;
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--green); color: #fff; font-family: var(--sans);
  font-size: .93rem; font-weight: 600; padding: 15px 26px; border-radius: 999px;
  box-shadow: var(--shadow-md); text-decoration: none;
  transform: translateY(120px); opacity: 0;
  transition: transform .5s var(--ease), opacity .5s var(--ease), background .2s;
}
.sticky-cta:hover { background: var(--green-deep); color: #fff; }
.sticky-cta.show { transform: none; opacity: 1; }
.sticky-cta .pulse-dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: #7ee2b8; flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .sticky-cta .pulse-dot::after {
    content: ""; position: absolute; inset: -4px; border-radius: 50%;
    border: 1.5px solid #7ee2b8; animation: ctaPulse 2.4s ease-out infinite;
  }
  @keyframes ctaPulse { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.9); opacity: 0; } }
}
body[data-tw-sticky="0"] .sticky-cta { display: none; }

/* ---------- 8. FAQ accordion ---------- */
body[data-tw-faq="0"] #faq { display: none; }
.faq-list { max-width: 780px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:first-child { border-top: 1px solid var(--line); }
.faq-item > button {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--serif); font-size: 1.28rem; color: var(--green);
  padding: 24px 4px;
}
.faq-item > button i { color: var(--teal); font-size: .85rem; transition: transform .35s var(--ease); flex: none; }
.faq-item.open > button i { transform: rotate(45deg); }
.faq-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.faq-item.open .faq-body { grid-template-rows: 1fr; }
.faq-body > div { overflow: hidden; }
.faq-body p { font-size: .97rem; padding: 0 4px 26px; max-width: 62ch; }

@media (max-width: 960px) {
  .meet-grid { grid-template-columns: 1fr; gap: 40px; }
  .testi-carousel .slides { min-height: 380px; }
  .sticky-cta { right: 16px; bottom: 16px; padding: 13px 20px; }
}