/* =============================================
   Info pages (about / help / terms / privacy) — motion layer
   - Cross-page View Transitions: the content slides in the
     direction of the tab you picked, the title morphs, and the
     tab indicator glides between tabs.
   - Entrance + scroll-reveal animations, card spotlight, smooth FAQ.
   ============================================= */

/* ── Cross-document view transitions (Chrome / Edge / Safari 18.2+) ── */
@view-transition { navigation: auto; }

.navbar            { view-transition-name: info-nav; }
.info-hero .kicker { view-transition-name: info-kicker; }
.info-hero h1      { view-transition-name: info-title; }
.info-hero p       { view-transition-name: info-lead; }
.info-tab-indicator { view-transition-name: info-tab-indicator; }
.info-body         { view-transition-name: info-body; }

::view-transition-group(*) { animation-duration: 0.5s; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
::view-transition-group(info-tab-indicator) { animation-duration: 0.55s; animation-timing-function: cubic-bezier(.3,1.35,.5,1); }

::view-transition-old(info-title),
::view-transition-old(info-lead),
::view-transition-old(info-kicker) { animation: vt-title-out 0.28s ease-in both; }
::view-transition-new(info-title)  { animation: vt-title-in 0.6s cubic-bezier(.2,.8,.2,1) 0.12s both; }
::view-transition-new(info-lead)   { animation: vt-title-in 0.6s cubic-bezier(.2,.8,.2,1) 0.2s both; }
::view-transition-new(info-kicker) { animation: vt-title-in 0.5s cubic-bezier(.2,.8,.2,1) 0.05s both; }

/* Direction follows the tabs: in RTL the next tab sits to the LEFT */
html.vt-fwd::view-transition-old(info-body)  { animation: vt-out-right 0.35s cubic-bezier(.4,0,1,1) both; }
html.vt-fwd::view-transition-new(info-body)  { animation: vt-in-left 0.55s cubic-bezier(.2,.8,.2,1) 0.08s both; }
html.vt-back::view-transition-old(info-body) { animation: vt-out-left 0.35s cubic-bezier(.4,0,1,1) both; }
html.vt-back::view-transition-new(info-body) { animation: vt-in-right 0.55s cubic-bezier(.2,.8,.2,1) 0.08s both; }

@keyframes vt-title-out { to   { opacity: 0; transform: translateY(-18px); filter: blur(6px); } }
@keyframes vt-title-in  { from { opacity: 0; transform: translateY(26px);  filter: blur(8px); } }
@keyframes vt-out-right { to   { opacity: 0; transform: translateX(80px); } }
@keyframes vt-out-left  { to   { opacity: 0; transform: translateX(-80px); } }
@keyframes vt-in-left   { from { opacity: 0; transform: translateX(-90px); } }
@keyframes vt-in-right  { from { opacity: 0; transform: translateX(90px); } }

/* Fallback exit (browsers without cross-page transitions) */
html.info-leaving .info-hero,
html.info-leaving .info-tabs,
html.info-leaving .info-body { transition: opacity 0.22s, transform 0.22s; opacity: 0; transform: translateY(-12px); }

/* ── Hero: drifting light, watermark, masked title ── */
.info-hero { position: relative; overflow: hidden; isolation: isolate; }
.info-hero::before {
  content: '';
  position: absolute;
  width: 520px; height: 520px;
  top: -220px; left: -120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(229,9,20,0.32) 0%, transparent 65%);
  filter: blur(20px);
  animation: info-orb 14s ease-in-out infinite alternate;
  z-index: -1;
}
.info-hero::after {
  content: attr(data-mark);
  position: absolute;
  left: 3%;
  bottom: -0.18em;
  font-size: clamp(5rem, 18vw, 12rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  color: rgba(255,255,255,0.035);
  white-space: nowrap;
  pointer-events: none;
  animation: info-mark 18s ease-in-out infinite alternate;
  z-index: -1;
}
@keyframes info-orb  { to { transform: translate(260px, 120px) scale(1.25); } }
@keyframes info-mark { to { transform: translateX(40px); } }

.info-hero .kicker,
.info-hero h1,
.info-hero p { animation: info-rise 0.8s cubic-bezier(.2,.8,.2,1) both; }
.info-hero .kicker { animation-delay: 0.05s; }
.info-hero h1      { animation-name: info-mask-up; animation-delay: 0.15s; }
.info-hero p       { animation-delay: 0.32s; }
html.vt-arrived .info-hero .kicker,
html.vt-arrived .info-hero h1,
html.vt-arrived .info-hero p { animation: none; } /* the view transition animates them instead */

@keyframes info-rise    { from { opacity: 0; transform: translateY(22px); filter: blur(6px); } }
@keyframes info-mask-up { from { opacity: 0; transform: translateY(40%); clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 -20% 0); } }

/* ── Tabs between the four pages ── */
.info-tabs {
  position: sticky;
  top: calc(var(--nav-height) + 10px);
  z-index: 50;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 640px;
  margin: -24px auto 0;   /* overlaps the hero edge; no transform so sticky stays fully visible */
  background: rgba(20,20,20,0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
}
.info-tabs a {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 9px 4px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
  transition: color 0.25s;
  white-space: nowrap;
}
.info-tabs a:hover { color: #fff; }
.info-tabs a.active { color: #fff; }
.info-tab-indicator {
  position: absolute;
  top: 5px; bottom: 5px;
  right: calc(5px + var(--i) * (100% - 10px) / 4);
  width: calc((100% - 10px) / 4);
  border-radius: 999px;
  background: linear-gradient(135deg, #f40612, #b20710);
  box-shadow: 0 6px 22px rgba(229,9,20,0.45);
}
.info-tabs + .info-body { padding-top: 34px; }

/* ── Scroll reveal & first-screen entrance ── */
.info-reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s cubic-bezier(.2,.8,.2,1), transform 0.7s cubic-bezier(.2,.8,.2,1); }
.info-reveal.in { opacity: 1; transform: none; }
.info-enter { animation: info-rise 0.75s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(0.35s + var(--d, 0) * 0.07s); }
html.vt-arrived .info-enter { animation: none; }

/* Section titles get a growing accent bar */
.info-body h2 { position: relative; padding-right: 16px; }
.info-body h2::before {
  content: '';
  position: absolute;
  right: 0; top: 0.3em; bottom: 0.3em;
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(to bottom, var(--red), #ff6a3d);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.6s cubic-bezier(.2,.8,.2,1) 0.15s;
}
.info-body h2.in::before,
.info-body h2.info-enter::before,
html.vt-arrived .info-body h2::before { transform: scaleY(1); }

/* ── Cards: lift + spotlight that follows the pointer ── */
.info-card { position: relative; overflow: hidden; transition: transform 0.35s cubic-bezier(.2,.8,.2,1), border-color 0.35s, box-shadow 0.35s; }
.info-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.09), transparent 60%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.info-card:hover { transform: translateY(-6px); border-color: rgba(255,255,255,0.18); box-shadow: 0 18px 40px rgba(0,0,0,0.55); }
.info-card:hover::after { opacity: 1; }

/* ── WhatsApp card: breathing ring ── */
.wa-card .wa-icon { position: relative; }
.wa-card .wa-icon::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(37,211,102,0.6);
  animation: wa-ring 2.2s ease-out infinite;
}
@keyframes wa-ring { from { transform: scale(0.7); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }

/* ── FAQ: smooth open/close where supported ── */
.faq { interpolate-size: allow-keywords; }
.faq details::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 0.35s cubic-bezier(.2,.8,.2,1), content-visibility 0.35s allow-discrete;
}
.faq details[open]::details-content { block-size: auto; }
.faq summary { transition: color 0.2s, padding 0.25s; }
.faq summary:hover { color: #fff; padding-right: 10px; }

/* ── Footer links: animated underline, current page highlighted ── */
.footer-links a { position: relative; }
.footer-links a::after {
  content: '';
  position: absolute;
  right: 0; left: 0; bottom: -4px;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s cubic-bezier(.2,.8,.2,1);
}
.footer-links a:hover::after,
.footer-links a.current::after { transform: scaleX(1); }
.footer-links a.current { color: #fff; }

/* ── Reading progress ── */
.info-progress {
  position: fixed;
  top: 0; right: 0; left: 0;
  height: 3px;
  z-index: 300;
  background: linear-gradient(to left, var(--red), #ff8a3d, var(--gold-light));
  transform: scaleX(0);
  transform-origin: right;
}

@media (max-width: 520px) {
  .info-tabs { margin: -22px 12px 0; }
  .info-tabs a { font-size: 0.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .info-reveal { opacity: 1; transform: none; }
}