/* ============================================================
   For Your Heart — Interactive geometry / calligraphy layer
   Calm Depth aesthetic: deep navy, emerald #10b981, gold #d4af6a
   ============================================================ */
:root {
  --ha-emerald:       #10b981;
  --ha-emerald-soft:  #34d399;
  --ha-gold:          #d4af6a;
  --ha-gold-soft:     #e9c98a;
  --ha-ink:           #fafaf6;
}

/* ---------- Stage wrapper ---------- */
.ha-stage-wrap {
  display: flex;
  justify-content: center;
  margin: 8px auto 18px;
  width: 100%;
}
.ha-stage {
  position: relative;
  width: 220px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
@media (max-width: 480px) {
  .ha-stage { width: 188px; height: 188px; }
  .ha-stage-wrap { margin: 4px auto 12px; }
}

.ha-stage__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ---------- Center label ---------- */
.ha-stage__label {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0 18px;
  text-align: center;
  pointer-events: none; /* let taps fall through to stage */
}
.ha-stage__ar {
  font-family: 'Noto Naskh Arabic', 'Amiri', 'Scheherazade New', serif;
  font-size: 28px;
  font-weight: 600;
  color: var(--ha-gold-soft);
  line-height: 1.15;
  letter-spacing: 0.5px;
  text-shadow: 0 0 14px rgba(212, 175, 106, 0.35);
  transition: opacity 360ms ease, text-shadow 700ms ease, color 700ms ease;
  white-space: nowrap;
}
.ha-stage__ar.is-glow {
  text-shadow:
    0 0 12px rgba(212, 175, 106, 0.65),
    0 0 28px rgba(16, 185, 129, 0.40);
  color: #f1d699;
}
.ha-stage__en {
  font-family: ui-serif, 'EB Garamond', Georgia, serif;
  font-size: 10px;
  max-width: 140px;
  margin-left: auto;
  margin-right: auto;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(250, 250, 246, 0.62);
  margin-top: 4px;
  transition: opacity 360ms ease;
}
@media (max-width: 480px) {
  .ha-stage__ar { font-size: 22px; }
  .ha-stage__en { font-size: 9px; max-width: 120px; }
}

/* ---------- Rotation animations (slow & calm) ---------- */
@keyframes ha-spin-cw  { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes ha-spin-ccw { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
@keyframes ha-glow-pulse {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.03); }
}
@keyframes ha-rosette-pulse {
  0%   { transform: scale(1);    filter: drop-shadow(0 0 0 transparent); }
  40%  { transform: scale(1.06); filter: drop-shadow(0 0 8px rgba(212,175,106,0.7)); }
  100% { transform: scale(1);    filter: drop-shadow(0 0 0 transparent); }
}
@keyframes ha-ripple-out {
  0%   { r: 1;  opacity: 0.85; stroke-width: 1.4; }
  100% { r: 95; opacity: 0;    stroke-width: 0.2; }
}
@keyframes ha-card-ripple-out {
  0%   { transform: translate(-50%, -50%) scale(0.2); opacity: 0.55; }
  100% { transform: translate(-50%, -50%) scale(3.2); opacity: 0; }
}

.ha-rotor {
  transform-origin: 100px 100px;
  transform-box: fill-box;
}
.ha-rotor--cw  { animation: ha-spin-cw  64s linear infinite; }
.ha-rotor--ccw { animation: ha-spin-ccw 90s linear infinite; }

.ha-glow {
  transform-origin: 100px 100px;
  transform-box: fill-box;
  animation: ha-glow-pulse 6.5s ease-in-out infinite;
}
.ha-rosette {
  transform-origin: 100px 100px;
  transform-box: fill-box;
}
.ha-rosette.is-pulse {
  animation: ha-rosette-pulse 900ms ease-out 1;
}

.ha-ripple {
  animation: ha-ripple-out 1.05s ease-out forwards;
  fill: none;
}

/* ---------- Heart card decorations ---------- */
.heart-card {
  position: relative;
  overflow: hidden; /* keep ripples and glows clipped */
  isolation: isolate;
}
.ha-card-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 28% 30%, rgba(212,175,106,0.16) 0%, transparent 55%),
    radial-gradient(circle at 78% 80%, rgba(16,185,129,0.12)  0%, transparent 55%);
  opacity: 0;
  transition: opacity 380ms ease;
}
.heart-card:hover  .ha-card-glow,
.heart-card:focus-visible .ha-card-glow,
.heart-card:active .ha-card-glow,
.heart-card.is-active .ha-card-glow { opacity: 1; }

/* Make the card content stack above the glow */
.heart-card > .heart-card__ar,
.heart-card > .heart-card__en { position: relative; z-index: 1; }

.ha-card-flourish {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%) scaleX(0.4);
  transform-origin: center;
  width: 60px;
  height: 6px;
  opacity: 0;
  transition: transform 520ms cubic-bezier(.2,.8,.2,1), opacity 380ms ease;
  pointer-events: none;
}
.heart-card:hover .ha-card-flourish,
.heart-card:focus-visible .ha-card-flourish,
.heart-card:active .ha-card-flourish { opacity: 1; transform: translateX(-50%) scaleX(1); }

.ha-card-ripple {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(16,185,129,0.45) 0%, rgba(16,185,129,0) 70%);
  transform: translate(-50%, -50%) scale(0.2);
  pointer-events: none;
  z-index: 2;
  animation: ha-card-ripple-out 650ms ease-out forwards;
}

/* ---------- Group label ornament ---------- */
.ha-ornament-inline {
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
  transform: translateY(-1px);
}

/* ---------- Length button decoration ---------- */
.heart-length {
  position: relative;
  overflow: hidden;
}
.heart-length::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 14px;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  background:
    radial-gradient(circle, rgba(212,175,106,0.45) 0%, rgba(212,175,106,0) 70%);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 380ms ease, transform 380ms cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}
.heart-length:hover::before,
.heart-length:focus-visible::before,
.heart-length:active::before { opacity: 1; transform: scale(1); }

/* ---------- Performance & accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  .ha-rotor--cw, .ha-rotor--ccw { animation: none !important; }
  .ha-glow { animation: none !important; }
  .ha-card-flourish { transition: none !important; }
}

/* On low-power phones, slow rotations even further to reduce GPU load */
@media (max-width: 480px) {
  .ha-rotor--cw  { animation-duration: 110s; }
  .ha-rotor--ccw { animation-duration: 150s; }
  .ha-glow       { animation-duration: 9s; }
}

/* ============================================================
   Home tile decoration — .heart-module on screenHome
   Compact "seal" + flourish + sparks + shimmer + parallax tilt
   ============================================================ */
.heart-module {
  position: relative;
  isolation: isolate;
  perspective: 800px;
  transition: transform 600ms cubic-bezier(.2,.8,.2,1), box-shadow 600ms ease, opacity 400ms ease;
}
.heart-module .heart-module__inner {
  position: relative;
  overflow: hidden;
  border-radius: 17px;
  transform: rotateX(var(--ha-tilt-x, 0deg)) rotateY(var(--ha-tilt-y, 0deg));
  transform-style: preserve-3d;
  transition: transform 320ms cubic-bezier(.2,.8,.2,1);
  /* leave room on the right for the seal */
  padding-right: 96px;
}
.heart-module:hover {
  box-shadow: 0 12px 40px -12px rgba(16, 185, 129, 0.28),
              0 4px 18px -8px rgba(212, 175, 106, 0.25);
}

/* ---- Compact girih seal on the right side ---- */
.ha-tile-seal {
  position: absolute;
  top: 50%;
  right: 14px;
  width: 76px;
  height: 76px;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 2;
}
.ha-tile-seal__halo {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(16, 185, 129, 0.25) 0%,
    rgba(16, 185, 129, 0.10) 40%,
    rgba(16, 185, 129, 0) 70%);
  filter: blur(4px);
  animation: ha-tile-halo 6.5s ease-in-out infinite;
}
.ha-tile-seal__svg {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
}
.ha-tile-seal__rotCw {
  animation: ha-spin-cw 70s linear infinite;
}
.ha-tile-seal__rotCcw {
  animation: ha-spin-ccw 95s linear infinite;
}
.ha-tile-seal__core {
  animation: ha-tile-core 4.5s ease-in-out infinite;
  transform-origin: 30px 30px;
  transform-box: fill-box;
}
.ha-tile-seal__ripple {
  transform-origin: 30px 30px;
  transform-box: fill-box;
}
.ha-tile-seal__ripple.is-rippling {
  animation: ha-tile-ripple 720ms cubic-bezier(.2,.7,.2,1);
}

@keyframes ha-tile-halo {
  0%, 100% { opacity: 0.55; transform: scale(0.95); }
  50%      { opacity: 1;    transform: scale(1.10); }
}
@keyframes ha-tile-core {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.18); }
}
@keyframes ha-tile-ripple {
  0%   { r: 4;  opacity: 0.7; stroke-width: 1.4; }
  100% { r: 30; opacity: 0;   stroke-width: 0.4; }
}

/* ---- Calligraphic flourish under the heading ---- */
.ha-tile-flourish {
  margin: 4px 0 10px 0;
  height: 12px;
  max-width: 180px;
  position: relative;
  z-index: 1;
}
.ha-tile-flourish svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.ha-tile-flourish path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: ha-tile-flourish-draw 2200ms cubic-bezier(.6,.2,.3,1) 200ms forwards,
             ha-tile-flourish-shimmer 5.5s ease-in-out 2.6s infinite;
}
.ha-tile-flourish circle {
  opacity: 0;
  animation: ha-tile-flourish-dot 600ms ease 2.0s forwards;
}
@keyframes ha-tile-flourish-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes ha-tile-flourish-dot {
  to { opacity: 0.9; }
}
@keyframes ha-tile-flourish-shimmer {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.95; }
}

/* ---- Drifting gold sparks ---- */
.ha-tile-sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  border-radius: 17px;
}
.ha-tile-spark {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,175,106,0.95) 0%, rgba(212,175,106,0) 70%);
  opacity: 0;
  filter: drop-shadow(0 0 4px rgba(212,175,106,0.6));
}
.ha-tile-spark--1 { left: 14%; top: 60%; animation: ha-tile-spark-a 11s ease-in-out 0.4s infinite; }
.ha-tile-spark--2 { left: 38%; top: 30%; animation: ha-tile-spark-b 13s ease-in-out 1.8s infinite; }
.ha-tile-spark--3 { left: 56%; top: 78%; animation: ha-tile-spark-a 9.5s ease-in-out 3.0s infinite; }
.ha-tile-spark--4 { left: 70%; top: 22%; animation: ha-tile-spark-b 12s ease-in-out 5.5s infinite; }

@keyframes ha-tile-spark-a {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.6); }
  20%  { opacity: 0.9; }
  60%  { opacity: 0.7; transform: translate(8px, -10px) scale(1); }
  100% { opacity: 0; transform: translate(16px, -22px) scale(0.5); }
}
@keyframes ha-tile-spark-b {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.5); }
  25%  { opacity: 0.9; }
  60%  { opacity: 0.6; transform: translate(-10px, -8px) scale(1.05); }
  100% { opacity: 0; transform: translate(-22px, -18px) scale(0.4); }
}

/* ---- Shimmer sweep across the tile every 9s ---- */
.ha-tile-shimmer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: 17px;
  background: linear-gradient(
    100deg,
    transparent 0%,
    transparent 35%,
    rgba(212, 175, 106, 0.10) 48%,
    rgba(255, 255, 255, 0.06) 50%,
    rgba(212, 175, 106, 0.10) 52%,
    transparent 65%,
    transparent 100%
  );
  background-size: 220% 100%;
  background-position: -120% 0;
  animation: ha-tile-shimmer-sweep 9s ease-in-out 2s infinite;
  mix-blend-mode: screen;
  opacity: 0.65;
}
@keyframes ha-tile-shimmer-sweep {
  0%   { background-position: -120% 0; }
  55%  { background-position: 220% 0; }
  100% { background-position: 220% 0; }
}

/* ---- Active/pulse on tap ---- */
.heart-module.ha-tile-pulse .ha-tile-seal__halo {
  animation: ha-tile-pulse-halo 700ms cubic-bezier(.2,.8,.2,1);
}
@keyframes ha-tile-pulse-halo {
  0%   { transform: scale(1); opacity: 0.6; }
  40%  { transform: scale(1.35); opacity: 1; }
  100% { transform: scale(1.05); opacity: 0.7; }
}

/* override the default :active scale so our 3D tilt isn't fighting it */
.heart-module:active { transform: scale(0.99); opacity: 1; }

/* ---- Mobile + reduced motion ---- */
@media (max-width: 480px) {
  .heart-module .heart-module__inner { padding-right: 90px; }
  .ha-tile-seal { width: 70px; height: 70px; right: 12px; }
  .ha-tile-flourish { max-width: 160px; }
  .ha-tile-seal__rotCw  { animation-duration: 110s; }
  .ha-tile-seal__rotCcw { animation-duration: 150s; }
}
@media (prefers-reduced-motion: reduce) {
  .ha-tile-seal__rotCw,
  .ha-tile-seal__rotCcw,
  .ha-tile-seal__halo,
  .ha-tile-seal__core,
  .ha-tile-shimmer,
  .ha-tile-spark,
  .ha-tile-flourish path { animation: none !important; }
  .ha-tile-flourish path { stroke-dashoffset: 0 !important; }
  .ha-tile-flourish circle { opacity: 0.9 !important; }
}