/* FIBYC "Where FIBYC is going" smartwatch (animated) */
.fw-stage {
  --ease: cubic-bezier(0.3, 0.7, 0.4, 1);
  --terracotta: #C2573F; --terracotta-soft: #D47A5C; --sage: #94A68B; --peach: #E8B77F;
  cursor: pointer;
}
/* ═══ Coming next: smartwatch ═══ */

.fw-stage { position: relative; display: grid; place-items: center; min-height: 340px; }
.fw-halo { position: absolute; width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232,183,127,0.32) 0%, rgba(194,87,63,0.12) 45%, rgba(194,87,63,0) 70%); filter: blur(8px); }
.fw-watch { position: relative; width: 204px; height: 244px; }
.fw-band { position: absolute; left: 50%; width: 150px; height: 120px; transform: translateX(-50%); z-index: 0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 2px, rgba(0,0,0,0) 2px 6px),
    linear-gradient(90deg, #6F8266 0%, #94A68B 30%, #A9B9A0 50%, #94A68B 70%, #6F8266 100%); }
.fw-band-top { bottom: calc(100% - 40px); border-radius: 30px 30px 10px 10px; }
.fw-band-bottom { top: calc(100% - 40px); border-radius: 10px 10px 30px 30px; }
.fw-crown { position: absolute; right: -9px; top: 66px; width: 12px; height: 38px; border-radius: 6px; z-index: 1;
  background: linear-gradient(90deg, #8E3E2A, #C2573F 55%, #E39A80); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15); }
.fw-button { position: absolute; right: -6px; top: 124px; width: 7px; height: 44px; border-radius: 4px; z-index: 1; background: linear-gradient(90deg, #4B3528, #6B4D3C); }
.fw-case { position: absolute; inset: 0; z-index: 2; border-radius: 58px; padding: 11px;
  background: linear-gradient(145deg, #6B4D3C 0%, #3D2A1F 40%, #24180F 100%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.25), inset 0 -2px 4px rgba(0,0,0,0.5), 0 30px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(0,0,0,0.3); }
.fw-screen { position: relative; height: 100%; border-radius: 47px; overflow: hidden; color: #FFF6EC;
  background: radial-gradient(120% 80% at 50% 0%, #2A1D15 0%, #0F0A07 70%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); }
.fw-screen::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(155deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 32%); }
.w-status { position: absolute; top: 14px; left: 22px; right: 22px; display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 700; z-index: 2; }
.w-brand { display: inline-flex; align-items: center; gap: 5px; color: #F2C79A; }
.w-mark { width: 10px; height: 10px; border-radius: 50%; background: var(--terracotta); }
.w-time { color: rgba(255,246,236,0.85); font-variant-numeric: tabular-nums; }

.w-card { position: absolute; inset: 34px 14px 26px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px;
  opacity: 0; transform: translateY(12px) scale(0.96); transition: opacity 0.45s var(--ease), transform 0.55s var(--ease); }
.w-card.is-active { opacity: 1; transform: none; }
.w-rings { position: relative; width: 118px; height: 118px; }
.w-rings svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.w-track { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 9; }
.w-ring { fill: none; stroke-width: 9; stroke-linecap: round; }
.w-r1 { stroke: #A9BC9F; stroke-dasharray: 326.7; stroke-dashoffset: 49; --c: 326.7; }
.w-r2 { stroke: #F0C08B; stroke-dasharray: 251.3; stroke-dashoffset: 75.4; --c: 251.3; }
.w-r3 { stroke: #E0785A; stroke-dasharray: 175.9; stroke-dashoffset: 14.1; --c: 175.9; }
.w-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.w-center b { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.w-center small { font-size: 8px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,246,236,0.6); margin-top: 3px; }
.w-legend { display: flex; gap: 8px; font-size: 8.5px; font-weight: 700; margin-top: 6px; }
.w-legend span::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 3px; }
.l1::before { background: #A9BC9F; } .l2::before { background: #F0C08B; } .l3::before { background: #E0785A; }

.w-icon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 22px; margin-bottom: 6px; }
.w-icon-alert { background: #E0785A; color: #fff; box-shadow: 0 0 0 0 rgba(224,120,90,0.6); }
.w-kicker { font-size: 9px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #F2C79A; }
.w-title { font-size: 15px; font-weight: 800; line-height: 1.15; }
.w-sub { font-size: 10px; line-height: 1.3; color: rgba(255,246,236,0.65); max-width: 140px; }
.w-pill { margin-top: 6px; font-size: 10px; font-weight: 800; padding: 6px 12px; border-radius: 999px; background: rgba(224,120,90,0.18); color: #F4A68D; }
.w-swap { display: flex; align-items: center; gap: 10px; margin: 8px 0 6px; }
.w-score { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 19px; font-weight: 800; color: #fff; }
.w-low { background: #D98A5F; }
.w-high { background: #94A68B; box-shadow: 0 0 18px rgba(148,166,139,0.6); }
.w-arrow { position: relative; width: 22px; height: 2px; background: rgba(255,246,236,0.6); }
.w-arrow::after { content: ''; position: absolute; right: -1px; top: -4px; width: 8px; height: 8px; border-top: 2px solid rgba(255,246,236,0.6); border-right: 2px solid rgba(255,246,236,0.6); transform: rotate(45deg); }
.w-bar { width: 120px; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.1); overflow: hidden; margin-bottom: 6px; }
.w-bar span { display: block; height: 100%; width: 86%; border-radius: 3px; background: linear-gradient(90deg, #D98A5F, #94A68B); }
.w-check { width: 58px; height: 58px; margin-bottom: 6px; }
.w-check circle { fill: rgba(148,166,139,0.18); stroke: #A9BC9F; stroke-width: 3; }
.w-check path { fill: none; stroke: #CFE0C5; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 44; stroke-dashoffset: 0; }
.w-dots { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; justify-content: center; gap: 5px; }
.w-dots span { width: 5px; height: 5px; border-radius: 3px; background: rgba(255,246,236,0.25); transition: width 0.35s var(--ease), background-color 0.35s; }
.w-dots span.is-active { width: 14px; background: #F2C79A; }
.fw-ripple { position: absolute; inset: -2px; border-radius: 60px; border: 2px solid rgba(224,120,90,0); pointer-events: none; z-index: -1; }

@media (min-width: 980px) {
  .fw-stage { min-height: 380px; }
  .fw-halo { width: 340px; height: 340px; }
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes w-ring-fill { from { stroke-dashoffset: var(--c); } }
  @keyframes w-pulse { 0% { box-shadow: 0 0 0 0 rgba(224,120,90,0.65); } 70% { box-shadow: 0 0 0 16px rgba(224,120,90,0); } 100% { box-shadow: 0 0 0 0 rgba(224,120,90,0); } }
  @keyframes w-ripple { 0% { border-color: rgba(224,120,90,0.7); transform: scale(1); } 100% { border-color: rgba(224,120,90,0); transform: scale(1.22); } }
  @keyframes w-buzz { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-3px) rotate(-1deg); } 40% { transform: translateX(3px) rotate(1deg); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } }
  @keyframes w-pop { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
  @keyframes w-bar { from { width: 48%; } }
  @keyframes w-draw { from { stroke-dashoffset: 44; } }
  @keyframes w-halo { 0%,100% { transform: scale(0.94); opacity: 0.8; } 50% { transform: scale(1.06); opacity: 1; } }
  @keyframes w-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -8px; } }

  .fw-live .fw-halo { animation: w-halo 6s ease-in-out infinite; }
  .fw-live .fw-watch { animation: w-float 7s ease-in-out infinite; }
  .fw-live .w-card.is-active .w-r1 { animation: w-ring-fill 1.4s var(--ease) 0.15s both; }
  .fw-live .w-card.is-active .w-r2 { animation: w-ring-fill 1.4s var(--ease) 0.3s both; }
  .fw-live .w-card.is-active .w-r3 { animation: w-ring-fill 1.4s var(--ease) 0.45s both; }
  .fw-live .w-card.is-active .w-icon-alert { animation: w-pulse 1.1s ease-out 0.2s 2; }
  .fw-live .fw-watch.is-alert .fw-case { animation: w-buzz 0.45s ease-in-out 0.15s 2; }
  .fw-live .fw-watch.is-alert .fw-ripple { animation: w-ripple 1s ease-out 0.15s 2; }
  .fw-live .w-card.is-active .w-low { animation: w-pop 0.5s var(--ease) 0.15s both; }
  .fw-live .w-card.is-active .w-arrow { animation: w-pop 0.4s var(--ease) 0.45s both; }
  .fw-live .w-card.is-active .w-high { animation: w-pop 0.6s var(--ease) 0.7s both; }
  .fw-live .w-card.is-active .w-bar span { animation: w-bar 1s var(--ease) 0.8s both; }
  .fw-live .w-card.is-active .w-check path { animation: w-draw 0.7s var(--ease) 0.25s both; }
  .fw-live .w-card.is-active .w-check { animation: w-pop 0.5s var(--ease) both; }
}

/* Keep the watch beside the text, like the original site */
.personalization-grid:has(.fw-stage) { grid-template-columns: minmax(0, 1.25fr) minmax(240px, 0.75fr); gap: 40px; }
@media (max-width: 980px) {
  .personalization-grid:has(.fw-stage) { grid-template-columns: minmax(0, 1.4fr) minmax(220px, 0.6fr); gap: 24px; }
  .fw-stage { min-height: 320px; }
  .fw-watch { transform: scale(0.9); }
  .fw-halo { width: 280px; height: 280px; }
}
@media (max-width: 640px) {
  .personalization-grid:has(.fw-stage) { grid-template-columns: 1fr; gap: 8px; }
  .fw-stage { min-height: 300px; }
  .fw-watch { transform: scale(0.82); }
  .fw-halo { width: 240px; height: 240px; }
}