/* Transitions from transitions.dev (see ~/.claude/skills/transitions-dev), adapted to this site's
   markup. Motion tokens (--duration-*, --ease-*, --blur-*) come from site.css. Wired by transitions.js. */
:root {
  --acc-expand: 250ms;
  --acc-collapse: 250ms;
  --acc-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tabs-dur: 250ms;
  --tabs-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shimmer-dur: 2000ms;
  --shimmer-band: 400%;
  --shimmer-ease: linear;
  --stagger-step: 60ms;
  --tilt-max: 5deg;
}

/* 21 · Accordion expand — FAQ items. grid-template-rows 0fr ↔ 1fr, no height measuring.
   The <details> stays open while the panel animates closed; transitions.js manages that. */
.faq-item.t-acc .faq-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--acc-collapse) var(--acc-ease);
}
.faq-item.t-acc[data-open="true"] .faq-body {
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--acc-expand) var(--acc-ease);
}
.faq-item.t-acc .t-acc-panel-inner {
  overflow: hidden;
  opacity: 0;
  filter: blur(2px);
  transition:
    opacity var(--acc-collapse) var(--acc-ease),
    filter var(--acc-collapse) var(--acc-ease);
}
.faq-item.t-acc[data-open="true"] .t-acc-panel-inner {
  opacity: 1;
  filter: blur(0);
  transition:
    opacity var(--acc-expand) var(--acc-ease),
    filter var(--acc-expand) var(--acc-ease);
}
/* The existing "+" rotates to "×"; follow data-open so it turns back while the panel closes. */
.faq-item.t-acc[open]:not([data-open="true"]) summary::after { transform: none; }

/* 16 · Tabs sliding — the plan builder's segmented choices (Full-time / Working / Student …). */
.segmented.t-tabs { position: relative; }
.segmented.t-tabs > button { position: relative; z-index: 1; }
.segmented.t-tabs > button.selected { background: transparent; box-shadow: none; }
.t-tabs-pill {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow-1);
  transform: translateX(0);
  transition:
    transform var(--tabs-dur) var(--tabs-ease),
    width var(--tabs-dur) var(--tabs-ease);
  will-change: transform, width;
  z-index: 0;
  pointer-events: none;
}

/* 15 · Shimmer text — "working on it" labels (opening checkout, preparing the PDF). */
.t-shimmer {
  --shimmer-base: color-mix(in srgb, currentColor 55%, transparent);
  --shimmer-highlight: currentColor;
  position: relative;
  display: inline-block;
  color: var(--shimmer-base);
}
.t-shimmer::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(90deg, transparent 0%, transparent 40%, var(--shimmer-highlight) 50%, transparent 60%, transparent 100%);
  background-size: var(--shimmer-band) 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: t-shimmer var(--shimmer-dur) var(--shimmer-ease) infinite;
}
.primary-button .t-shimmer { --shimmer-highlight: #fff8eb; }
@keyframes t-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0% 0; }
}

/* 08 · Page side-by-side — plan-builder steps slide in from the side you are heading towards. */
.setup-step.t-page-enter { animation: t-page-in var(--duration-fast) var(--ease-smooth-out) both; }
.setup-step.t-page-enter[data-dir="back"] { animation-name: t-page-in-back; }
@keyframes t-page-in { from { opacity: 0; transform: translateX(var(--distance-base)); filter: blur(var(--blur-medium)); } }
@keyframes t-page-in-back { from { opacity: 0; transform: translateX(calc(-1 * var(--distance-base))); filter: blur(var(--blur-medium)); } }

/* 18 · Texts reveal — the Day 1 preview rows inside checkout rise in one after another. */
.t-stagger > * { animation: t-stagger-in var(--duration-very-slow) var(--ease-smooth-out) both; animation-delay: calc(var(--i, 0) * var(--stagger-step) + 120ms); }
@keyframes t-stagger-in { from { opacity: 0; transform: translateY(var(--distance-medium)); filter: blur(var(--blur-medium)); } }

/* Day 1 preview card shown inside checkout. */
.checkout-day-preview { margin: 14px 0 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper-2, #f4efe4); }
.checkout-day-preview h4 { margin: 0 0 8px; font: 600 0.78rem/1.3 var(--font, inherit); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.checkout-day-preview ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.checkout-day-preview li { display: grid; grid-template-columns: 92px 1fr; gap: 10px; font-size: 0.86rem; line-height: 1.35; }
.checkout-day-preview time { color: var(--muted); font-variant-numeric: tabular-nums; }
.checkout-day-preview .more { margin: 8px 0 0; font-size: 0.8rem; color: var(--muted); }

/* 19 · Card hover tilt (light) — sample pages on mouse/trackpad devices only. */
@media (hover: hover) and (pointer: fine) {
  .t-tilt { perspective: 1200px; }
  .t-tilt-card {
    transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    transition: transform var(--duration-medium) var(--ease-smooth-out);
    will-change: transform;
  }
  .t-tilt.is-tilting .t-tilt-card { transition: transform 120ms linear; }
}

@media (prefers-reduced-motion: reduce) {
  .faq-item.t-acc .faq-body, .faq-item.t-acc .t-acc-panel-inner,
  .t-tabs-pill, .t-tilt-card { transition: none !important; }
  .t-shimmer::before, .setup-step.t-page-enter, .t-stagger > * { animation: none !important; }
  .t-tilt-card { transform: none !important; }
}

/* UPSC Capacity & Hours Calculator */
.calculator-section { padding-top: 40px; padding-bottom: 40px; }
.calc-card { max-width: 980px; margin: 0 auto; }
.calc-box {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 32px;
  padding: 32px;
  background: #14221a;
  border-radius: 16px;
  border: 1px solid rgba(236, 201, 130, 0.2);
}
@media (max-width: 768px) {
  .calc-box { grid-template-columns: 1fr; gap: 24px; padding: 20px; }
}
.calc-inputs { display: flex; flex-direction: column; gap: 16px; }
.calc-field { display: flex; flex-direction: column; gap: 6px; }
.calc-field label { font-size: 13px; font-weight: 600; color: #d5dec9; letter-spacing: 0.02em; }
.calc-select {
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid rgba(236, 201, 130, 0.25);
  background: rgba(10, 20, 15, 0.7);
  color: #ede6d8;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s;
}
.calc-select:focus { border-color: #ecc982; }
.calc-results {
  background: rgba(236, 201, 130, 0.05);
  border: 1px solid rgba(236, 201, 130, 0.2);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
}
.calc-stat-block { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid rgba(236, 201, 130, 0.12); padding-bottom: 10px; }
.calc-stat-label { font-size: 13px; color: #a4b39b; }
.calc-stat-val { font-size: 20px; color: #ecc982; font-weight: 700; }
.calc-stat-val small { font-size: 12px; color: #d5dec9; font-weight: 400; }
.calc-verdict {
  padding: 12px;
  background: rgba(46, 125, 50, 0.15);
  border-left: 3px solid #66bb6a;
  border-radius: 6px;
}
.calc-badge { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #81c784; display: block; margin-bottom: 4px; }
.calc-verdict p { margin: 0; font-size: 12.5px; color: #d5dec9; line-height: 1.4; }
#calc-apply-btn { width: 100%; text-align: center; justify-content: center; margin-top: 8px; }