/* ══════════════════════════════════════
   Landing page – feature card visuals
   (templates showcase + editor demo)
   ══════════════════════════════════════ */

/* ── Templates Showcase (scrolling grid) ── */

.templates-showcase {
  aspect-ratio: 16/9;
  position: relative;
  overflow: hidden;
}

.templates-showcase::before,
.templates-showcase::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 60px;
  z-index: 2;
  pointer-events: none;
}

.templates-showcase::before {
  top: 0;
  background: linear-gradient(to bottom, var(--bg-card), transparent);
}

.templates-showcase::after {
  bottom: 0;
  background: linear-gradient(to top, var(--bg-card), transparent);
}

.templates-scroll-track {
  display: flex;
  gap: 12px;
  padding: 0 12px;
  height: 100%;
  position: absolute;
  inset: 0;
}

.templates-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.templates-col img {
  width: 100%;
  border-radius: 12px;
  display: block;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  transition: transform .3s ease, box-shadow .3s ease;
}

.templates-col img:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 24px rgba(0,0,0,0.15);
}

.templates-col-up {
  animation: scrollUp 25s linear infinite;
}

.templates-col-down {
  animation: scrollDown 25s linear infinite;
}

@keyframes scrollUp {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

@keyframes scrollDown {
  0% { transform: translateY(-50%); }
  100% { transform: translateY(0); }
}


/* ══════════════════════════════════════
   Editor Demo – website editor schematic
   ══════════════════════════════════════ */

.editor-demo {
  aspect-ratio: 16/9;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
  border-radius: 20px;
}

/* ── Browser Chrome ── */

.ed-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.06);
  flex-shrink: 0;
  width: 90%;
}

.ed-dots {
  display: flex;
  gap: 5px;
}

.ed-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.ed-dots span:nth-child(1) { background: #ff5f57; }
.ed-dots span:nth-child(2) { background: #febc2e; }
.ed-dots span:nth-child(3) { background: #28c840; }

.ed-url-bar {
  flex: 1;
  max-width: 220px;
  height: 18px;
  background: rgba(0,0,0,.04);
  border-radius: 9px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  gap: 5px;
  margin: 0 auto;
}

.ed-url-lock {
  color: rgba(0,0,0,.35);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.ed-url-text {
  flex: 1;
  height: 4px;
  background: rgba(0,0,0,.08);
  border-radius: 2px;
}

.ed-bar-btn {
  width: 36px;
  height: 14px;
  background: var(--primary);
  border-radius: 7px;
  opacity: .85;
  flex-shrink: 0;
}

/* ── Body ── */

.ed-body {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
  width: 90%;
  max-height: 80%;
  position: relative;
}

/* ── Sidebar – tools & themes ── */

.ed-side {
  width: 20%;
  min-width: 90px;
  background: #fff;
  border-right: 1px solid rgba(0,0,0,.06);
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}

.ed-side-label {
  width: 55%;
  height: 4px;
  background: rgba(0,0,0,.1);
  border-radius: 2px;
  margin-bottom: 4px;
}

.ed-side-label.short {
  width: 35%;
}

.ed-side-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 5px;
  border-radius: 5px;
}

.ed-side-icon {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  flex-shrink: 0;
  position: relative;
}

/* Image icon */
.ed-icon-img {
  background: rgba(0,0,0,.06);
  overflow: hidden;
}
.ed-icon-img::before {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 1px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 6px solid rgba(0,0,0,.2);
}
.ed-icon-img::after {
  content: '';
  position: absolute;
  top: 3px;
  right: 3px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(0,0,0,.15);
}

/* Text icon */
.ed-icon-txt {
  background: rgba(0,0,0,.06);
}
.ed-icon-txt::before,
.ed-icon-txt::after {
  content: '';
  position: absolute;
  left: 3px;
  height: 2px;
  background: rgba(0,0,0,.2);
  border-radius: 1px;
}
.ed-icon-txt::before { top: 4px; width: 8px; }
.ed-icon-txt::after  { top: 8px; width: 5px; }

/* Grid icon */
.ed-icon-grid {
  background: rgba(0,0,0,.06);
  overflow: hidden;
}
.ed-icon-grid::before,
.ed-icon-grid::after {
  content: '';
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: rgba(0,0,0,.18);
}
.ed-icon-grid::before { top: 2px; left: 2px; box-shadow: 6px 0 0 rgba(0,0,0,.18); }
.ed-icon-grid::after  { bottom: 2px; left: 2px; box-shadow: 6px 0 0 rgba(0,0,0,.18); }

/* Divider icon */
.ed-icon-div {
  background: rgba(0,0,0,.06);
}
.ed-icon-div::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 3px;
  width: 8px;
  height: 2px;
  background: rgba(0,0,0,.2);
  border-radius: 1px;
}

.ed-side-line {
  flex: 1;
  height: 4px;
  background: rgba(0,0,0,.07);
  border-radius: 2px;
}

.ed-side-sep {
  height: 1px;
  background: rgba(0,0,0,.06);
  margin: 4px 0;
}

/* Theme color dots */
.ed-theme-row {
  display: flex;
  gap: 5px;
  padding: 4px 5px;
}

.ed-theme-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  outline: 1.5px solid transparent;
  outline-offset: 1.5px;
  transition: outline-color .4s;
}

.ed-theme-dot.td1 { background: #c9a77c; }
.ed-theme-dot.td2 { background: #6b8f71; }
.ed-theme-dot.td3 { background: #db2777; }
.ed-theme-dot.td4 { background: #1a1a2e; }

.ed-theme-dot.td1 {
  animation: edTheme1Ring 12s ease-in-out infinite;
}
.ed-theme-dot.td2 {
  animation: edTheme2Ring 12s ease-in-out infinite;
}
.ed-theme-dot.td3 {
  animation: edTheme3Ring 12s ease-in-out infinite;
}

@keyframes edTheme1Ring {
  0%, 12%   { outline-color: var(--text-heading); }
  16%, 92%  { outline-color: transparent; }
  96%, 100% { outline-color: var(--text-heading); }
}

@keyframes edTheme2Ring {
  0%, 14%   { outline-color: transparent; }
  17%, 22%  { outline-color: var(--text-heading); }
  25%, 100% { outline-color: transparent; }
}

@keyframes edTheme3Ring {
  0%, 22%   { outline-color: transparent; }
  25%, 68%  { outline-color: var(--text-heading); }
  72%, 100% { outline-color: transparent; }
}

/* ── Canvas – wedding website preview ── */

.ed-canvas {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 8%;
  gap: 8px;
  overflow: hidden;
  background-color: #f5f3f0;
  animation: edCanvasBg 12s ease-in-out infinite;
}

/* Hero section */
.ed-cv-hero {
  width: 100%;
  height: 34%;
  background: linear-gradient(135deg, #c9a77c, #a67c52);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-shrink: 0;
  animation: edHeroShift 12s ease-in-out infinite;
}

.ed-cv-names {
  width: 45%;
  height: 7px;
  background: rgba(255,255,255,.75);
  border-radius: 3px;
}

.ed-cv-date {
  width: 25%;
  height: 4px;
  background: rgba(255,255,255,.5);
  border-radius: 2px;
}

/* Details row */
.ed-cv-details {
  display: flex;
  gap: 12px;
  justify-content: center;
  width: 70%;
  padding: 4px 0;
  flex-shrink: 0;
}

.ed-cv-detail-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex: 1;
}

.ed-cv-detail-icon {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(0,0,0,.08);
  animation: edDetailShift 12s ease-in-out infinite;
}

.ed-cv-detail-line {
  width: 70%;
  height: 3px;
  background: rgba(0,0,0,.07);
  border-radius: 2px;
}

/* Text section */
.ed-cv-text-section {
  width: 65%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px 0;
  flex-shrink: 0;
}

.ed-cv-heading {
  width: 50%;
  height: 5px;
  background: rgba(0,0,0,.14);
  border-radius: 3px;
  animation: edTextPulse 12s ease-in-out infinite;
}

.ed-cv-text-line {
  width: 80%;
  height: 3px;
  background: rgba(0,0,0,.06);
  border-radius: 2px;
}

.ed-cv-text-line.short {
  width: 55%;
}

/* Photo gallery */
.ed-cv-gallery {
  width: 80%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  flex-shrink: 0;
}

.ed-cv-photo {
  aspect-ratio: 1;
  background: rgba(0,0,0,.06);
  border-radius: 3px;
}

/* Footer */
.ed-cv-footer {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 4px 0;
  flex-shrink: 0;
}

.ed-cv-footer-line {
  width: 30%;
  height: 3px;
  background: rgba(0,0,0,.05);
  border-radius: 2px;
}

/* ── Selection highlight ── */

.ed-select {
  position: absolute;
  border: 2px solid var(--primary);
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  will-change: top, left, width, height, opacity;
  animation: edSelectMove 12s ease-in-out infinite;
}

.ed-select::before,
.ed-select::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--primary);
  border-radius: 2px;
}

.ed-select::before { top: -3px; left: -3px; }
.ed-select::after { bottom: -3px; right: -3px; }

/* ── Cursor ── */

.ed-cursor {
  position: absolute;
  z-index: 5;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.2));
  pointer-events: none;
  will-change: top, left;
  animation: edCursor 12s cubic-bezier(.4,0,.2,1) infinite;
}

/* ══════════════════════════════════════
   Editor keyframes (12s loop)

   Phase 1 (0–15%):   cursor on hero,
                       selection wraps hero
   Phase 2 (15–28%):  cursor to sidebar td2 (green),
                       canvas bg + hero → green
   Phase 3 (28–48%):  cursor on text section,
                       selection wraps text,
                       heading pulses (typing)
   Phase 4 (48–62%):  cursor back to sidebar td3 (pink),
                       canvas bg + hero → pink
   Phase 5 (62–88%):  cursor on gallery,
                       selection wraps gallery,
                       photo fills in
   Reset (88–100%)
   ══════════════════════════════════════ */

/*
  12s loop timeline:
  Phase 1 (0–12%):   cursor on hero, selection wraps hero
  Phase 2 (14–20%):  cursor clicks td2 (green theme)
  Phase 3 (22–28%):  cursor clicks td3 (pink theme)
  Phase 4 (30–44%):  cursor on text, selection, typing
  Phase 5 (46–56%):  cursor clicks last photo, selection wraps it
  Phase 6 (58–68%):  "Remove" btn appears, cursor clicks it, photo fades
  Reset   (70–100%): everything restores
*/

@keyframes edCursor {
  0%, 3%    { top: 25%; left: 65%; }
  /* Phase 1: on hero */
  7%, 11%   { top: 18%; left: 55%; }
  /* Phase 2: move to td2 in sidebar (sidebar is ~0-20% of ed-body) */
  16%       { top: 52%; left: 5%; }
  /* Click td2 */
  17%       { top: 52%; left: 5%; transform: scale(.7); }
  18%, 20%  { top: 52%; left: 5%; transform: scale(1); }
  /* Phase 3: move to td3 */
  24%       { top: 52%; left: 8%; }
  /* Click td3 */
  25%       { top: 52%; left: 8%; transform: scale(.7); }
  26%, 28%  { top: 52%; left: 8%; transform: scale(1); }
  /* Phase 4: move to text section */
  33%, 43%  { top: 56%; left: 52%; }
  /* Phase 5: move to last gallery photo (4th photo, rightmost) */
  49%       { top: 74%; left: 78%; }
  /* Click photo */
  50%       { top: 74%; left: 78%; transform: scale(.7); }
  51%, 55%  { top: 74%; left: 78%; transform: scale(1); }
  /* Phase 6: move to Remove button (below last photo) */
  60%       { top: 82%; left: 80%; }
  /* Click Remove */
  61%       { top: 82%; left: 80%; transform: scale(.7); }
  62%, 66%  { top: 82%; left: 80%; transform: scale(1); }
  /* Return */
  78%, 100% { top: 25%; left: 65%; }
}

/* Selection: hero → text → last photo (positions relative to ed-canvas) */
@keyframes edSelectMove {
  /* Phase 1: wrap hero */
  0%, 4%    { opacity: 0; top: 10px; left: 8%; width: 84%; height: 34%; }
  7%, 11%   { opacity: 1; top: 10px; left: 8%; width: 84%; height: 34%; }
  14%, 30%  { opacity: 0; top: 10px; left: 8%; width: 84%; height: 34%; }
  /* Phase 4: wrap text */
  33%, 43%  { opacity: 1; top: 45%; left: 14%; width: 72%; height: 12%; }
  46%, 48%  { opacity: 0; top: 45%; left: 14%; width: 72%; height: 12%; }
  /* Phase 5: wrap last photo only (4th in a 4-col grid) */
  50%, 66%  { opacity: 1; top: 58%; left: 65%; width: 18%; height: 28%; }
  70%, 100% { opacity: 0; top: 58%; left: 65%; width: 18%; height: 28%; }
}

/* Canvas background shifts with theme */
@keyframes edCanvasBg {
  0%, 15%   { background-color: #f5f3f0; }
  18%, 23%  { background-color: #eef3ee; }
  26%, 68%  { background-color: #f8eef3; }
  76%, 100% { background-color: #f5f3f0; }
}

/* Hero color theme shift: warm → green → pink → warm */
@keyframes edHeroShift {
  0%, 15%   { background: linear-gradient(135deg, #c9a77c, #a67c52); }
  18%, 23%  { background: linear-gradient(135deg, #6b8f71, #4a7c59); }
  26%, 68%  { background: linear-gradient(135deg, #db2777, #be185d); }
  76%, 100% { background: linear-gradient(135deg, #c9a77c, #a67c52); }
}

/* Detail icons shift with theme */
@keyframes edDetailShift {
  0%, 15%   { background: rgba(0,0,0,.08); }
  18%, 23%  { background: rgba(107,143,113,.25); }
  26%, 68%  { background: rgba(219,39,119,.2); }
  76%, 100% { background: rgba(0,0,0,.08); }
}

/* Text heading pulse (typing) */
@keyframes edTextPulse {
  0%, 33%   { width: 50%; background: rgba(0,0,0,.14); }
  37%       { width: 35%; background: rgba(0,0,0,.18); }
  40%       { width: 55%; background: rgba(0,0,0,.16); }
  44%, 100% { width: 50%; background: rgba(0,0,0,.14); }
}

/* Last gallery photo: click → select → remove → restore */
.ed-cv-photo-last {
  position: relative;
  z-index: 9;
  animation: edGalleryFill 12s ease-in-out infinite, edPhotoRemove 12s ease-in-out infinite;
}

@keyframes edPhotoRemove {
  0%, 61%   { opacity: 1; transform: scale(1); }
  62%       { opacity: .8; transform: scale(.92); }
  64%       { opacity: 0; transform: scale(.5); }
  65%, 82%  { opacity: 0; transform: scale(0); }
  90%, 100% { opacity: 1; transform: scale(1); }
}

/* Remove button on last photo */
.ed-photo-remove-btn {
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%) scale(0);
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 5px;
  white-space: nowrap;
  letter-spacing: .3px;
  box-shadow: 0 2px 8px rgba(239,68,68,.4);
  opacity: 0;
  animation: edRemoveBtnShow 12s ease-out infinite;
  z-index: 3;
}

@keyframes edRemoveBtnShow {
  0%, 52%   { opacity: 0; transform: translateX(-50%) scale(0); }
  55%, 60%  { opacity: 1; transform: translateX(-50%) scale(1); }
  /* Press effect when cursor clicks */
  61%       { opacity: 1; transform: translateX(-50%) scale(.85); }
  62%       { opacity: 0; transform: translateX(-50%) scale(0); }
  63%, 100% { opacity: 0; transform: translateX(-50%) scale(0); }
}

@keyframes edGalleryFill {
  0%, 46%   { background: rgba(0,0,0,.06); }
  50%, 62%  { background: linear-gradient(135deg, rgba(219,39,119,.15), rgba(219,39,119,.3)); }
  70%, 100% { background: rgba(0,0,0,.06); }
}


/* ══════════════════════════════════════
   RSVP Confirmation Visual
   (10s loop: form fill → submit → dashboard)
   ══════════════════════════════════════ */

.rsvp-visual {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: linear-gradient(145deg, #faf8f6, #f3efe9);
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Form Wrapper (holds card + cursor, moves together) ── */

.rsvp-form-wrapper {
  position: relative;
  width: 100%;
  max-width: 360px;
  z-index: 1;
  animation: rsvpFormPhase 10s ease-in-out infinite;
}

/* ── Form Card ── */

.rsvp-form-card {
  width: 100%;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 8px 40px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.04);
  overflow: hidden;
}

.rsvp-form-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 22px;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: #fff;
}

.rsvp-heart-icon {
  display: flex;
  animation: rsvpHeartBeat 1.5s ease-in-out infinite;
}

.rsvp-heart-icon svg {
  width: 18px;
  height: 18px;
}

@keyframes rsvpHeartBeat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.2); }
  28% { transform: scale(1); }
}

.rsvp-form-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .3px;
}

.rsvp-form-body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.rsvp-field {
  opacity: 0;
  transform: translateY(8px);
  animation: rsvpFieldIn 10s ease-out infinite;
}

.rsvp-field-delay1 { animation-delay: .3s; }
.rsvp-field-delay2 { animation-delay: .6s; }
.rsvp-field-delay3 { animation-delay: .9s; }
.rsvp-field-delay4 { animation-delay: 1.2s; }

@keyframes rsvpFieldIn {
  0%, 3%   { opacity: 0; transform: translateY(8px); }
  8%, 52%  { opacity: 1; transform: translateY(0); }
  58%, 100% { opacity: 1; transform: translateY(0); }
}

.rsvp-label {
  font-size: 10px;
  font-weight: 600;
  color: #999;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 5px;
}

.rsvp-input {
  background: #f7f5f2;
  border: 1.5px solid #ebe8e4;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  color: #333;
  display: flex;
  align-items: center;
  transition: border-color .3s, box-shadow .3s;
}

.rsvp-input.rsvp-input-active {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.rsvp-input-small {
  font-size: 12px;
  padding: 9px 14px;
  color: #666;
}

/* Typing animation */
.rsvp-typing {
  overflow: hidden;
  white-space: nowrap;
  border-right: none;
  animation: rsvpType 10s steps(12) infinite;
  max-width: 0;
}

@keyframes rsvpType {
  0%, 5%   { max-width: 0; }
  18%, 55% { max-width: 120px; }
  62%, 100% { max-width: 120px; }
}

.rsvp-cursor-blink {
  color: var(--primary);
  font-weight: 300;
  animation: rsvpBlink .6s step-end infinite;
  margin-left: -1px;
}

@keyframes rsvpBlink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* Radio group */
.rsvp-radio-group {
  display: flex;
  gap: 8px;
}

.rsvp-radio {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1.5px solid #ebe8e4;
  font-size: 12px;
  color: #888;
  background: #fafafa;
  transition: all .4s cubic-bezier(.4,0,.2,1);
}

.rsvp-radio-yes {
  animation: rsvpRadioSelect 10s ease-in-out infinite;
}

@keyframes rsvpRadioSelect {
  0%, 22%  { border-color: #ebe8e4; background: #fafafa; color: #888; }
  25%, 55% { border-color: #22c55e; background: #f0fdf4; color: #16a34a; }
  62%, 100% { border-color: #22c55e; background: #f0fdf4; color: #16a34a; }
}

.rsvp-radio-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid #ccc;
  position: relative;
  transition: all .3s;
}

.rsvp-radio-yes .rsvp-radio-dot {
  animation: rsvpDotFill 10s ease-in-out infinite;
}

@keyframes rsvpDotFill {
  0%, 22%  { border-color: #ccc; background: transparent; box-shadow: none; }
  25%, 55% { border-color: #22c55e; background: #22c55e; box-shadow: inset 0 0 0 2px #fff; }
  62%, 100% { border-color: #22c55e; background: #22c55e; box-shadow: inset 0 0 0 2px #fff; }
}

/* Counter */
.rsvp-counter {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1.5px solid #ebe8e4;
  border-radius: 8px;
  overflow: hidden;
  width: fit-content;
}

.rsvp-counter-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #999;
  background: #fafafa;
  cursor: default;
  user-select: none;
}

.rsvp-counter-plus {
  animation: rsvpCounterPulse 10s ease-in-out infinite;
}

@keyframes rsvpCounterPulse {
  0%, 32%   { background: #fafafa; color: #999; }
  35%       { background: var(--primary-soft); color: var(--primary); transform: scale(1.1); }
  38%, 100% { background: #fafafa; color: #999; transform: scale(1); }
}

.rsvp-counter-val {
  width: 32px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #333;
  border-left: 1.5px solid #ebe8e4;
  border-right: 1.5px solid #ebe8e4;
  line-height: 32px;
  animation: rsvpCountVal 10s ease-in-out infinite;
}

@keyframes rsvpCountVal {
  0%, 32%  { }
  35%      { transform: scale(1.15); }
  38%, 100% { transform: scale(1); }
}

/* Submit button */
.rsvp-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  cursor: default;
  opacity: 0;
  transform: translateY(8px);
  animation: rsvpSubmitPhase 10s ease-in-out infinite;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
}

.rsvp-submit-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  transform: translateX(-100%);
  animation: rsvpShimmer 10s ease-in-out infinite;
}

@keyframes rsvpShimmer {
  0%, 44%  { transform: translateX(-100%); }
  48%, 50% { transform: translateX(100%); }
  54%, 100% { transform: translateX(100%); }
}

.rsvp-check-icon {
  opacity: 0;
  transform: scale(0);
  animation: rsvpCheckPop 10s ease-out infinite;
}

@keyframes rsvpCheckPop {
  0%, 45%  { opacity: 0; transform: scale(0); }
  48%      { opacity: 1; transform: scale(1.3); }
  51%, 100% { opacity: 1; transform: scale(1); }
}

@keyframes rsvpSubmitPhase {
  0%, 36%  { opacity: 0; transform: translateY(8px); }
  40%, 43% { opacity: 1; transform: translateY(0); }
  /* Cursor click press */
  44%      { opacity: 1; transform: translateY(0) scale(.95); }
  46%, 100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Form card: shrinks and slides left for dashboard */
@keyframes rsvpFormPhase {
  0%, 52%  { transform: scale(1) translateX(0); opacity: 1; }
  60%, 92% { transform: scale(.72) translateX(-50%); opacity: 1; }
  97%, 100% { transform: scale(.72) translateX(-50%); opacity: 0; }
}

/* ── Animated cursor ── */

.rsvp-cursor {
  position: absolute;
  z-index: 10;
  width: 24px;
  height: 24px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
  pointer-events: none;
  opacity: 0;
  animation: rsvpCursorMove 10s cubic-bezier(.4,0,.2,1) infinite;
}

/* Cursor click pulse ring */
.rsvp-cursor::after {
  content: '';
}

/*
  Timeline (10s):
  0-4%    : cursor fades in near name input
  5-16%   : on name input (typing)
  18-26%  : moves to "Asistiré" radio, click
  28-36%  : moves to "+" counter btn, click
  38-48%  : moves to Confirmar button, click
  50-55%  : cursor fades out
  56-100% : hidden (dashboard phase)
*/
@keyframes rsvpCursorMove {
  /* Fade in at name input (right side of input field) */
  0%       { opacity: 0; top: 15%; left: 65%; }
  8%       { opacity: 1; top: 25%; left: 35%; }
  /* Stay on name input while typing */
  16%      { opacity: 1; top: 25%; left: 35%; }
  /* Move to "Asistiré" radio */
  22%      { opacity: 1; top: 41%; left: 21%; }
  /* Click effect on radio */
  24%      { opacity: 1; top: 41%; left: 21%; transform: scale(.6); }
  26%      { opacity: 1; top: 41%; left: 21%; transform: scale(1); }
  /* Move to "+" counter */
  32%      { opacity: 1; top: 58%; left: 32%; }
  /* Click effect on counter */
  34%      { opacity: 1; top: 58%; left: 32%; transform: scale(.6); }
  36%      { opacity: 1; top: 58%; left: 32%; transform: scale(1); }
  /* Move to Confirmar button */
  42%      { opacity: 1; top: 87%; left: 55%; }
  /* Click effect on confirm */
  44%      { opacity: 1; top: 87%; left: 55%; transform: scale(.6); }
  46%      { opacity: 1; top: 87%; left: 55%; transform: scale(1); }
  /* Fade out */
  50%      { opacity: 0; top: 87%; left: 55%; }
  /* Hidden during dashboard */
  51%, 100% { opacity: 0; top: 82%; left: 55%; }
}

/* Input focus ring follows cursor timing */
.rsvp-input:first-child {
  animation: rsvpInputFocus 10s ease-in-out infinite;
}

@keyframes rsvpInputFocus {
  0%, 2%   { border-color: #ebe8e4; box-shadow: none; }
  4%, 16%  { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
  20%, 100% { border-color: #ebe8e4; box-shadow: none; }
}

/* ── Dashboard overlay ── */

.rsvp-dashboard {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 52%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  z-index: 2;
  animation: rsvpDashIn 10s ease-out infinite;
}

@keyframes rsvpDashIn {
  0%, 58%  { opacity: 0; transform: translateY(-50%) translateX(20px); }
  66%, 90% { opacity: 1; transform: translateY(-50%) translateX(0); }
  97%, 100% { opacity: 0; transform: translateY(-50%) translateX(0); }
}

.rsvp-dash-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border-radius: 12px;
  padding: 8px 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  opacity: 0;
  transform: translateY(10px);
}

.rsvp-dash-row-1 { animation: rsvpRowIn 10s ease-out infinite; animation-delay: 0s; }
.rsvp-dash-row-2 { animation: rsvpRowIn 10s ease-out infinite; animation-delay: .15s; }
.rsvp-dash-row-3 { animation: rsvpRowIn 10s ease-out infinite; animation-delay: .3s; }
.rsvp-dash-row-4 { animation: rsvpRowIn 10s ease-out infinite; animation-delay: .45s; }

@keyframes rsvpRowIn {
  0%, 60%  { opacity: 0; transform: translateY(10px); }
  68%, 90% { opacity: 1; transform: translateY(0); }
  97%, 100% { opacity: 0; transform: translateY(0); }
}

.rsvp-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #555;
  flex-shrink: 0;
}

.rsvp-dash-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.rsvp-dash-name {
  font-size: 10px;
  font-weight: 600;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rsvp-dash-detail {
  font-size: 9px;
  color: #999;
}

.rsvp-badge {
  font-size: 9px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}

.rsvp-badge-yes {
  background: #f0fdf4;
  color: #16a34a;
}

.rsvp-badge-no {
  background: #fef2f2;
  color: #ef4444;
}

/* ── Responsive ── */

@media (max-width: 1200px) {
  .rsvp-visual {
    aspect-ratio: 3/2;
    min-height: 300px;
  }

  .rsvp-form-card {
    max-width: 300px;
  }

  .rsvp-dashboard {
    width: 48%;
    right: 12px;
  }
}

@media (max-width: 600px) {
  .rsvp-visual {
    padding: 16px;
    aspect-ratio: auto;
    min-height: 260px;
  }

  .rsvp-form-card {
    max-width: 260px;
  }

  .rsvp-dashboard {
    width: 44%;
    right: 8px;
  }

  .rsvp-dash-detail,
  .rsvp-dash-name {
    font-size: 9px;
  }

  .rsvp-badge {
    font-size: 8px;
    padding: 2px 6px;
  }
}


/* ══════════════════════════════════════
   Domain Visual
   (8s loop: type URL → site loads → badge appears)
   ══════════════════════════════════════ */

.domain-visual {
  aspect-ratio: 19/11;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: linear-gradient(145deg, #faf8f6, #f3efe9);
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Browser frame ── */

.domain-browser {
  width: 100%;
  max-width: 550px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 40px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.04);
  overflow: hidden;
  animation: domainBrowserIn 8s ease-out infinite;
}

@keyframes domainBrowserIn {
  0%, 2%  { opacity: 0; transform: translateY(12px); }
  6%, 90% { opacity: 1; transform: translateY(0); }
  96%, 100% { opacity: 1; transform: translateY(0); }
}

/* ── Top bar ── */

.domain-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.domain-dots {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}

.domain-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.domain-dots span:nth-child(1) { background: #ff5f57; }
.domain-dots span:nth-child(2) { background: #febc2e; }
.domain-dots span:nth-child(3) { background: #28c840; }

.domain-url-bar {
  flex: 1;
  height: 40px;
  background: rgba(0,0,0,.04);
  border-radius: 10px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 7px;
  overflow: hidden;
}

.domain-lock {
  color: #22c55e;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  opacity: 0;
  animation: domainLockIn 8s ease-out infinite;
}

.domain-lock svg {
  width: 13px;
  height: 14px;
}

@keyframes domainLockIn {
  0%, 28%  { opacity: 0; transform: scale(.5); }
  34%, 90% { opacity: 1; transform: scale(1); }
  96%, 100% { opacity: 1; transform: scale(1); }
}

.domain-url-text {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
}

.domain-typed {
  overflow: hidden;
  white-space: nowrap;
  max-width: 0;
  animation: domainType 8s steps(22) infinite;
}

.domain-typed::after {
  content: 'www.mariaypablo.com';
}

@keyframes domainType {
  0%, 6%   { max-width: 0; }
  28%, 90% { max-width: 180px; }
  96%, 100% { max-width: 180px; }
}

.domain-caret {
  color: var(--primary);
  font-weight: 300;
  font-size: 15px;
  animation: domainCaretBlink .6s step-end infinite;
  margin-left: -1px;
}

@keyframes domainCaretBlink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.domain-share-btn {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  border-radius: 6px;
  transition: all .3s;
  opacity: 0;
  animation: domainShareIn 8s ease-out infinite;
}

@keyframes domainShareIn {
  0%, 32%  { opacity: 0; }
  38%, 90% { opacity: 1; }
  96%, 100% { opacity: 1; }
}

/* ── Mini site preview ── */

.domain-site {
  padding: 0;
  opacity: 0;
  animation: domainSiteIn 8s ease-out infinite;
}

@keyframes domainSiteIn {
  0%, 30%  { opacity: 0; }
  40%, 90% { opacity: 1; }
  96%, 100% { opacity: 1; }
}

.domain-site-hero {
  height: 105px;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.domain-site-names {
  font-size: 18px;
  font-weight: 700;
  color: rgba(255,255,255,.9);
  letter-spacing: 3px;
}

.domain-site-date {
  width: 60px;
  height: 3px;
  background: rgba(255,255,255,.4);
  border-radius: 2px;
}

.domain-site-content {
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.domain-site-line {
  height: 5px;
  background: rgba(0,0,0,.06);
  border-radius: 2px;
  animation: domainLineShimmer 8s ease-in-out infinite;
}

.domain-site-line.w60 { width: 60%; }
.domain-site-line.w80 { width: 80%; animation-delay: .1s; }
.domain-site-line.w45 { width: 45%; animation-delay: .2s; }

@keyframes domainLineShimmer {
  0%, 38%  { opacity: 0; transform: translateX(-8px); }
  44%, 90% { opacity: 1; transform: translateX(0); }
  96%, 100% { opacity: 1; transform: translateX(0); }
}

/* ── Floating badge ── */

.domain-badge {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(0,0,0,.12);
  font-size: 20px;
  font-weight: 600;
  color: #22c55e;
  opacity: 0;
  transform: translateY(10px);
  animation: domainBadgeIn 8s ease-out infinite;
}

.domain-badge svg {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}

.domain-badge-tick {
  opacity: 0;
  transform: scale(0);
  animation: domainTickZoom 8s ease-out infinite;
}

@keyframes domainTickZoom {
  0%, 56%  { opacity: 0; transform: scale(0) rotate(-10deg); }
  62%      { opacity: 1; transform: scale(1.3) rotate(4deg); }
  66%, 88% { opacity: 1; transform: scale(1) rotate(0deg); }
  94%, 100% { opacity: 0; transform: scale(0) rotate(-10deg); }
}

@keyframes domainBadgeIn {
  0%, 50%  { opacity: 0; transform: translateX(-50%) translateY(-10px) scale(.9); }
  58%, 88% { opacity: 1; transform: translateX(-50%) translateY(-20%) scale(1); }
  94%, 100% { opacity: 0; transform: translateX(-50%) translateY(-25%) scale(.98); }
}

/* ── Responsive ── */

@media (max-width: 1200px) {
  .domain-visual {
    aspect-ratio: 3/2;
    min-height: 300px;
    padding: 16px;
  }

  .domain-browser {
    max-width: 380px;
  }
}

@media (max-width: 600px) {
  .domain-visual {
    padding: 12px;
    aspect-ratio: auto;
    min-height: 260px;
  }

  .domain-browser {
    max-width: 100%;
  }

  .domain-badge {
    font-size: 10px;
    padding: 6px 10px;
    bottom: 8px;
    left: 12px;
  }
}