/* S Chetoora LLC — global styles */

/* ============================================================
   2026-04-08 — Admin theme variables (light + dark)
   ============================================================ */
body.admin-app {
  --admin-bg:            #ffffff;   /* page background — pure white in light mode */
  --admin-card:          #ffffff;   /* card background */
  --admin-card-soft:     #f8fafc;   /* soft card / table head */
  --admin-border:        #e2e8f0;   /* card / divider borders */
  --admin-border-soft:   #f1f5f9;   /* very soft dividers between rows */
  --admin-text:          #0f172a;   /* main text */
  --admin-text-soft:     #475569;   /* secondary text */
  --admin-text-muted:    #94a3b8;   /* muted labels / placeholders */
  --admin-accent:        #06b6d4;   /* cyan accent */
  --admin-accent-soft:   #ecfeff;
  --admin-success:       #059669;
  --admin-success-bg:    #d1fae5;
  --admin-warning:       #d97706;
  --admin-warning-bg:    #fef3c7;
  --admin-danger:        #dc2626;
  --admin-danger-bg:     #fee2e2;
  --admin-input-bg:      #ffffff;
  --admin-input-border:  #cbd5e1;
}
body.admin-app.dark {
  --admin-bg:            #0a1424;   /* deep navy */
  --admin-card:          #131e35;   /* slightly lighter card */
  --admin-card-soft:     #1a2742;   /* soft card / table head */
  --admin-border:        #243152;   /* visible borders in dark */
  --admin-border-soft:   #1c2742;
  --admin-text:          #e2e8f0;
  --admin-text-soft:     #94a3b8;
  --admin-text-muted:    #64748b;
  --admin-accent:        #22d3ee;
  --admin-accent-soft:   #082f49;
  --admin-success:       #10b981;
  --admin-success-bg:    #064e3b;
  --admin-warning:       #f59e0b;
  --admin-warning-bg:    #78350f;
  --admin-danger:        #ef4444;
  --admin-danger-bg:     #7f1d1d;
  --admin-input-bg:      #1a2742;
  --admin-input-border:  #334155;
}

/* Apply theme to the major surfaces */
body.admin-app { background: var(--admin-bg); color: var(--admin-text); }
body.admin-app main { background: var(--admin-bg); }
body.admin-app .bg-white { background: var(--admin-card) !important; }
body.admin-app .bg-slate-50 { background: var(--admin-card-soft) !important; }
body.admin-app .bg-slate-100 { background: var(--admin-bg) !important; }
body.admin-app .border-slate-200 { border-color: var(--admin-border) !important; }
body.admin-app .border-slate-100 { border-color: var(--admin-border-soft) !important; }
body.admin-app .text-slate-900 { color: var(--admin-text) !important; }
body.admin-app .text-slate-700 { color: var(--admin-text) !important; }
body.admin-app .text-slate-600 { color: var(--admin-text-soft) !important; }
body.admin-app .text-slate-500 { color: var(--admin-text-soft) !important; }
body.admin-app .text-slate-400 { color: var(--admin-text-muted) !important; }
body.admin-app .text-slate-300 { color: var(--admin-text-muted) !important; }
body.admin-app .divide-slate-100 > * + * { border-color: var(--admin-border-soft) !important; }
body.admin-app .divide-slate-200 > * + * { border-color: var(--admin-border) !important; }
body.admin-app input, body.admin-app select, body.admin-app textarea {
  background: var(--admin-input-bg) !important;
  color: var(--admin-text) !important;
  border-color: var(--admin-input-border) !important;
}
/* ===== Admin sidebar — synced to PUBLIC SITE brand palette =====
   Uses --sc-navy (#0a1f3d) — the exact navy from the public-site topnav and
   hero gradient — instead of the generic slate-900. Active state uses the
   brand teal (--sc-teal #0d9488), not Tailwind cyan-600. Menu item font is
   Cinzel to match the right-side admin headers (font-display-tight) and the
   public site nav-link. Result: sidebar reads as the same brand surface as
   the public navbar, and the typography is in sync with the admin header. */
body.admin-app aside.bg-slate-900 {
  background: linear-gradient(180deg, #0a1f3d 0%, #0c2440 60%, #0a1f3d 100%) !important;
  color: #cbd5e1;
  border-right: 1px solid rgba(94, 234, 212, 0.10);
}
body.admin-app.dark aside.bg-slate-900 {
  background: linear-gradient(180deg, #050f1f 0%, #081628 60%, #050f1f 100%) !important;
  border-right: 1px solid rgba(94, 234, 212, 0.06);
}
/* Border under the logo — soft teal hairline matching the public navbar */
body.admin-app aside.bg-slate-900 .border-slate-800 {
  border-color: rgba(94, 234, 212, 0.10) !important;
}
/* Menu item buttons: Cinzel (matches admin header `.font-display-tight`),
   uppercase, wider letter spacing — exactly like the public-site nav links */
body.admin-app aside.bg-slate-900 nav button,
body.admin-app aside.bg-slate-900 > div > button {
  font-family: 'Cinzel', Georgia, serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  font-size: 12.5px !important;
}
/* Inactive menu item — soft slate text */
body.admin-app aside.bg-slate-900 nav button.text-slate-300,
body.admin-app aside.bg-slate-900 > div > button.text-slate-300 {
  color: #cbd5e1 !important;
}
/* Hover — subtle teal-tinted background instead of slate-800 */
body.admin-app aside.bg-slate-900 nav button.hover\:bg-slate-800:hover,
body.admin-app aside.bg-slate-900 > div > button.hover\:bg-slate-800:hover {
  background: rgba(13, 148, 136, 0.14) !important;
  color: #ecfeff !important;
}
/* Active menu item — brand teal gradient, NOT generic cyan-600 */
body.admin-app aside.bg-slate-900 nav button.bg-cyan-600,
body.admin-app aside.bg-slate-900 > div > button.bg-cyan-600 {
  background: linear-gradient(135deg, #0d9488 0%, #0f4c5c 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px -10px rgba(13, 148, 136, 0.65);
}
/* Drag handle — softer when idle, teal on hover */
body.admin-app aside.bg-slate-900 .drag-handle {
  color: rgba(148, 163, 184, 0.55) !important;
}
body.admin-app aside.bg-slate-900 nav button:hover .drag-handle {
  color: #5eead4 !important;
}

/* ===== Admin sidebar logo — pin to fixed height =====
   The base `.logo-plate` rule already provides the die-cut headlight sweep
   (mask-image of the logo PNG). Here we just lock the wrapper to the IMG's
   max-height so the sidebar slot stays the size we designed for. */
body.admin-app aside.bg-slate-900 .logo-plate {
  height: 70px;
  width: auto;
}
body.admin-app aside.bg-slate-900 .logo-plate img {
  max-width: none !important;
  max-height: 100% !important;
  width: auto !important;
  height: 100% !important;
}

/* Hover states should still be visible in dark mode */
body.admin-app .hover\:bg-slate-50:hover { background: var(--admin-card-soft) !important; }
body.admin-app .hover\:bg-cyan-50:hover { background: var(--admin-accent-soft) !important; }

/* Status pills should keep their semantic colors but invert background slightly in dark */
body.admin-app.dark .bg-emerald-100 { background: rgba(16, 185, 129, 0.18) !important; }
body.admin-app.dark .bg-amber-100 { background: rgba(245, 158, 11, 0.18) !important; }
body.admin-app.dark .bg-red-100 { background: rgba(239, 68, 68, 0.18) !important; }
body.admin-app.dark .bg-blue-100 { background: rgba(59, 130, 246, 0.18) !important; }
body.admin-app.dark .bg-purple-100 { background: rgba(168, 85, 247, 0.18) !important; }
body.admin-app.dark .bg-cyan-100 { background: rgba(34, 211, 238, 0.18) !important; }
body.admin-app.dark .bg-slate-100 { background: rgba(148, 163, 184, 0.18) !important; }
body.admin-app.dark .bg-cyan-50 { background: rgba(34, 211, 238, 0.10) !important; }

/* Math display row — used in property detail to show calculation work */
.math-row {
  display: grid;
  grid-template-columns: minmax(160px, 220px) 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 0.85rem 1rem;
  border-radius: 0.75rem;
  background: var(--admin-card-soft);
  border: 1px solid var(--admin-border);
}
.math-row .math-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--admin-text-soft);
}
.math-row .math-formula {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 14px;
  color: var(--admin-text-soft);
}
.math-row .math-result {
  font-size: 18px;
  font-weight: 800;
  color: var(--admin-text);
  white-space: nowrap;
}
.math-row.math-positive .math-result { color: var(--admin-success); }
.math-row.math-negative .math-result { color: var(--admin-danger); }

/* Mobile/tablet: stack the math row vertically so nothing overflows */
@media (max-width: 768px) {
  .math-row {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }
  .math-row .math-result {
    text-align: left;
  }
}

/* Responsive padding bumps so cards don't waste space on narrow screens */
@media (max-width: 1024px) {
  body.admin-app .p-6 { padding: 1.25rem !important; }
  body.admin-app .p-8 { padding: 1.5rem !important; }
  body.admin-app .px-8 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
}
@media (max-width: 640px) {
  body.admin-app main > div.p-8 { padding: 1rem !important; }
  /* Mobile: sidebar slides in as an overlay when toggled via hamburger */
  body.admin-app aside.bg-slate-900 {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 80vw;
    max-width: 280px;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
  }
  body.admin-app aside.bg-slate-900.mobile-open {
    transform: translateX(0);
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
  }
  body.admin-app .mobile-sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99;
  }
  body.admin-app main { width: 100% !important; }
  body.admin-app .mobile-hamburger { display: inline-flex !important; }
}
/* Hide hamburger on desktop */
body.admin-app .mobile-hamburger { display: none; }

/* Read-only display row — looks like a label, not an input */
.display-row {
  display: grid;
  grid-template-columns: minmax(160px, 220px) 1fr;
  gap: 1rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--admin-border-soft);
}
.display-row .display-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--admin-text-soft);
  align-self: center;
}
.display-row .display-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--admin-text);
}
.display-row .display-value.muted { color: var(--admin-text-muted); font-weight: 400; font-style: italic; }

/* Mobile: stack display rows vertically */
@media (max-width: 768px) {
  .display-row {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
}

/* ===== Property detail tab bar — drag to reorder ===== */
.pd-tabbar button {
  position: relative;
  -webkit-user-select: none;
  user-select: none;
}
.pd-tabbar button[draggable="true"] { cursor: grab; }
.pd-tabbar button[draggable="true"]:active { cursor: grabbing; }
.pd-tab-drop-target {
  box-shadow: inset 3px 0 0 0 var(--admin-accent, #0891b2);
  background: rgba(8, 145, 178, 0.06);
}
.pd-tabbar button.dragging { opacity: 0.4; }

/* Theme toggle button styling */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  border-radius: 9999px;
  border: 1px solid var(--admin-border);
  background: var(--admin-card);
  color: var(--admin-text-soft);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.theme-toggle:hover {
  border-color: var(--admin-accent);
  color: var(--admin-accent);
}

/* ============================================================
   2026-04-08 — Admin-only accessibility scale
   The owner is 60+ and uses glasses. Inside the admin shell only,
   bump base font sizes, table row padding, and form-field heights
   so everything is comfortably readable. The public marketing site
   keeps its current cinematic typography unchanged.
   ============================================================ */
body.admin-app {
  font-size: 16px;            /* base bumped from Tailwind's default ~16px to be explicit */
  line-height: 1.55;
}

/* Bump every Tailwind text-* utility one notch larger inside the admin shell.
   These selectors are scoped to .admin-app so the public site is untouched. */
.admin-app .text-\[10px\] { font-size: 12px !important; line-height: 1.45 !important; }
.admin-app .text-\[11px\] { font-size: 13px !important; line-height: 1.45 !important; }
.admin-app .text-xs       { font-size: 14px !important; line-height: 1.55 !important; }
.admin-app .text-sm       { font-size: 16px !important; line-height: 1.6 !important; }
.admin-app .text-base     { font-size: 17px !important; line-height: 1.65 !important; }
.admin-app .text-lg       { font-size: 19px !important; line-height: 1.6 !important; }
.admin-app .text-xl       { font-size: 22px !important; line-height: 1.55 !important; }
.admin-app .text-2xl      { font-size: 26px !important; line-height: 1.45 !important; }
.admin-app .text-3xl      { font-size: 32px !important; line-height: 1.3 !important;  }
.admin-app .text-4xl      { font-size: 38px !important; line-height: 1.25 !important; }

/* Table rows: bigger vertical padding so each row is comfortable for older eyes. */
.admin-app table th,
.admin-app table td {
  padding-top: 0.75rem !important;     /* py-3 */
  padding-bottom: 0.75rem !important;
}
.admin-app table th {
  font-size: 12px !important;
  letter-spacing: 0.06em;
}

/* Inputs / selects / textareas — taller and easier to tap */
.admin-app input[type="text"],
.admin-app input[type="email"],
.admin-app input[type="tel"],
.admin-app input[type="number"],
.admin-app input[type="password"],
.admin-app input[type="date"],
.admin-app input[type="search"],
.admin-app select,
.admin-app textarea {
  font-size: 16px !important;          /* prevents iOS zoom-in on focus */
  padding-top: 0.65rem !important;
  padding-bottom: 0.65rem !important;
}

/* Buttons that use text-xs / text-sm should still feel clickable */
.admin-app button {
  min-height: 36px;
}
.admin-app .btn-primary,
.admin-app button.btn-primary {
  font-size: 16px;
  padding: 0.85rem 1.75rem;
}

/* Sidebar nav labels — keep them bold and slightly larger */
.admin-app aside nav button {
  font-size: 14px !important;
  letter-spacing: 0.08em;
}

/* Page header (the H2 at the top of every admin page) */
.admin-app main > header h2 {
  font-size: 28px !important;
}

/* Card paddings — slightly more breathing room everywhere */
.admin-app .rounded-2xl.border.border-slate-200 {
  /* leave existing padding alone — Tailwind p-* classes still win */
}



:root {
  /* Brand palette pulled directly from the official S Chetoora LLC logo
     - sc-teal: the dominant teal of the house+key icon (Tailwind teal-600 ≈ #0d9488)
     - sc-teal-deep: the darker teal/blue of the cursive wordmark
     - sc-teal-light: the brighter teal accent (mint highlight in the icon)
     - sc-navy: deep navy for backgrounds (matches the dark blue in the wordmark)
     - sc-cream: light warm off-white for backgrounds (replaces stark white) */
  --sc-teal:         #0d9488;
  --sc-teal-deep:    #0f4c5c;
  --sc-teal-light:   #5eead4;
  --sc-teal-pale:    #ccfbf1;
  --sc-navy:         #0a1f3d;
  --sc-blue:         #134e5c;
  --sc-cyan:         #0d9488;  /* legacy alias — now points to brand teal */
  --sc-gold:         #d4a017;
  --sc-amber:        #f59e0b;
  --sc-bg:           #f8fafc;
  --sc-bg-dark:      #0a1424;
  --sc-text:         #0f172a;
  --sc-muted:        #64748b;
  --sc-border:       #e2e8f0;
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html, body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--sc-text);
  background: var(--sc-bg);
}

.font-display {
  font-family: 'Cinzel Decorative', 'Cinzel', Georgia, serif;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.font-display-tight {
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.gradient-text {
  /* Logo-matching gradient: deep teal → mid teal → bright mint */
  background: linear-gradient(135deg, var(--sc-teal-deep) 0%, var(--sc-teal) 55%, var(--sc-teal-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.gradient-bg {
  /* Logo-matching dark hero background: navy → deep teal → mid teal */
  background: linear-gradient(135deg, var(--sc-navy) 0%, var(--sc-teal-deep) 55%, var(--sc-teal) 100%);
}

.glass {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.glass-dark {
  background: rgba(10, 20, 36, 0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.btn-primary {
  background: linear-gradient(135deg, var(--sc-teal-deep), var(--sc-teal));
  color: white;
  padding: 0.875rem 2rem;
  border-radius: 9999px;
  font-weight: 600;
  letter-spacing: 0.025em;
  transition: all 0.25s ease;
  box-shadow: 0 10px 25px -10px rgba(30, 58, 138, 0.6);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 30px -10px rgba(30, 58, 138, 0.8);
}

.btn-gold {
  background: linear-gradient(135deg, var(--sc-amber), var(--sc-gold));
  color: white;
  padding: 0.875rem 2rem;
  border-radius: 9999px;
  font-weight: 600;
  letter-spacing: 0.025em;
  transition: all 0.25s ease;
  box-shadow: 0 10px 25px -10px rgba(212, 160, 23, 0.6);
}

.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 30px -10px rgba(212, 160, 23, 0.8);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.08);
  color: white;
  padding: 0.875rem 2rem;
  border-radius: 9999px;
  font-weight: 500;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.25s ease;
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.4);
}

/* Listing card */
.listing-card {
  background: white;
  border-radius: 1.25rem;
  overflow: hidden;
  border: 1px solid var(--sc-border);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.listing-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.18);
  border-color: var(--sc-cyan);
}

.listing-card .img-wrap {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(135deg, #e0f2fe 0%, #cffafe 100%);
  position: relative;
}

.listing-card .img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.listing-card:hover .img-wrap img {
  transform: scale(1.06);
}

.company-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.875rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: white;
  backdrop-filter: blur(8px);
  background: rgba(10, 31, 61, 0.85);
}

/* ============================================================
   PAGE-LOAD CAMERA SHUTTER INTRO (2 seconds total)
   ============================================================ */
.shutter-intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  overflow: hidden;
}

.shutter-intro .blade {
  position: absolute;
  left: 0;
  right: 0;
  height: 50vh;
  background: #050b16;
  will-change: transform;
}
.shutter-intro .blade.top    { top: 0;    transform: translateY(0); animation: shutterOpenTop 1.4s 0.18s cubic-bezier(0.86, 0, 0.07, 1) forwards; }
.shutter-intro .blade.bottom { bottom: 0; transform: translateY(0); animation: shutterOpenBot 1.4s 0.18s cubic-bezier(0.86, 0, 0.07, 1) forwards; }

@keyframes shutterOpenTop { to { transform: translateY(-101%); } }
@keyframes shutterOpenBot { to { transform: translateY(101%); } }

/* The flash — bright white pulse mimicking a camera click */
.shutter-intro .flash {
  position: absolute;
  inset: 0;
  background: #ffffff;
  opacity: 0;
  animation: shutterFlash 0.4s ease-out forwards;
}
@keyframes shutterFlash {
  0%   { opacity: 0; }
  18%  { opacity: 0.95; }
  60%  { opacity: 0.4; }
  100% { opacity: 0; }
}

/* Subtle SLR-style aperture ring drawn at center during the flash */
.shutter-intro .ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 240px; height: 240px;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  animation: shutterRing 0.8s ease-out forwards;
}
.shutter-intro .ring::after {
  content: '';
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
}
@keyframes shutterRing {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  20%  { opacity: 0.9; transform: translate(-50%, -50%) scale(0.85); }
  60%  { opacity: 0.5; transform: translate(-50%, -50%) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.4); }
}

.shutter-intro.gone { display: none; }

/* ============================================================
   HERO — futurist cinematic, customer-first
   Layers (back → front):
     1. .hero-slideshow .slide  (Alpine-driven crossfade + Ken Burns)
     2. .shutter-flash          (inter-slide camera shutter wipe)
     3. .hero-vignette          (radial darkening for cinematic frame)
     4. .hero-grain             (subtle film grain SVG)
     5. .hero-overlay           (brand blue gradient for legibility)
     6. .hero-orbs              (3 ambient floating soft orbs)
     7. content (z-index 10)
   ============================================================ */

/* Inter-slide shutter wipe — matches the page-load intro feel */
.shutter-flash {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
}
.shutter-flash .blade {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  background: #050b16;
  will-change: transform;
}
.shutter-flash .blade.top    { top: 0;    transform: translateY(-101%); }
.shutter-flash .blade.bottom { bottom: 0; transform: translateY(101%); }

.shutter-flash.click .blade.top    { animation: bladeTopClick 0.42s cubic-bezier(0.7, 0, 0.3, 1); }
.shutter-flash.click .blade.bottom { animation: bladeBotClick 0.42s cubic-bezier(0.7, 0, 0.3, 1); }

/* SHUTTER theme: the blades cover the swap moment, so the underlying slide
   change must be INSTANT — otherwise the 1.8s opacity crossfade leaves the
   old image bleeding through when the shutter opens, which reads as a "flip". */
body[data-hero-theme="shutter"] .hero-slideshow .slide {
  transition: opacity 0s linear;
}

@keyframes bladeTopClick {
  0%   { transform: translateY(-101%); }
  50%  { transform: translateY(0); }
  100% { transform: translateY(-101%); }
}
@keyframes bladeBotClick {
  0%   { transform: translateY(101%); }
  50%  { transform: translateY(0); }
  100% { transform: translateY(101%); }
}

.hero-bg {
  background: #050b16;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

/* --- Slideshow layer (no mouse parallax — was page-wide hover effect, removed) --- */
.hero-slideshow {
  position: absolute;
  inset: -3%;
  z-index: 0;
}

.hero-slideshow .slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  /* Long, smooth crossfade — 1.8s ensures the previous slide is fully gone
     before its scale ever drifts noticeably from the incoming one. */
  transition: opacity 1.8s cubic-bezier(0.45, 0, 0.2, 1);
  will-change: opacity, transform;
  /* Ken Burns runs continuously on EVERY slide (alternating in/out forever)
     so a slide never "snaps" when it loses .is-active — there is no animation
     start/stop tied to active state at all, only opacity changes. The slow
     20s cycle reads as a calm, cinematic drift rather than a heartbeat. */
  animation: kenBurns 22s ease-in-out infinite alternate;
}

.hero-slideshow .slide.is-active {
  opacity: 1;
}

@keyframes kenBurns {
  from { transform: scale(1.04); }
  to   { transform: scale(1.12); }
}

/* ============================================================
   Hero dot indicators — elegant slide pagination, lower-left
   Click any dot to jump to that slide. Active dot is wider + glowing.
   ============================================================ */
.hero-dots {
  position: absolute;
  left: 2.5rem;
  bottom: 2.5rem;
  z-index: 11;
  display: flex;
  gap: 0.65rem;
  opacity: 0;
  animation: heroFadeUp 1s 1.8s ease-out forwards;
}
.hero-dots button {
  width: 28px;
  height: 3px;
  border: none;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.32);
  cursor: pointer;
  padding: 0;
  transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              width 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.45s ease;
}
.hero-dots button:hover {
  background: rgba(255, 255, 255, 0.55);
}
.hero-dots button.is-active {
  width: 56px;
  background: linear-gradient(90deg, #5eead4, #14b8a6);
  box-shadow: 0 0 16px rgba(94, 234, 212, 0.55);
}
@media (max-width: 767px) {
  .hero-dots { left: 1.5rem; bottom: 1.5rem; gap: 0.5rem; }
  .hero-dots button { width: 22px; }
  .hero-dots button.is-active { width: 42px; }
}

/* --- Cinematic vignette (lighter so the city photo shows clearly) --- */
.hero-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
              rgba(0, 0, 0, 0) 50%,
              rgba(0, 0, 0, 0.18) 85%,
              rgba(0, 0, 0, 0.45) 100%);
}

/* --- Film grain (subtle SVG-data noise) --- */
.hero-grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Brand gradient overlay (lighter — preserves photo visibility while keeping headline legible) --- */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5, 11, 22, 0.30) 0%, rgba(5, 11, 22, 0.05) 32%, rgba(5, 11, 22, 0.55) 100%);
}

/* --- Floating ambient orbs --- */
.hero-orbs {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}

.hero-orbs .orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.45;
  mix-blend-mode: screen;
  will-change: transform;
}

.hero-orbs .orb-1 {
  width: 520px; height: 520px;
  background: radial-gradient(circle, #0d9488 0%, transparent 70%);
  top: -10%; left: -8%;
  animation: orbDrift1 22s ease-in-out infinite alternate;
}
.hero-orbs .orb-2 {
  width: 460px; height: 460px;
  background: radial-gradient(circle, #d4a017 0%, transparent 70%);
  bottom: -12%; right: -10%;
  animation: orbDrift2 28s ease-in-out infinite alternate;
}
.hero-orbs .orb-3 {
  width: 380px; height: 380px;
  background: radial-gradient(circle, #1e3a8a 0%, transparent 70%);
  top: 35%; left: 50%;
  animation: orbDrift3 32s ease-in-out infinite alternate;
}

@keyframes orbDrift1 {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(40px, 60px, 0) scale(1.15); }
}
@keyframes orbDrift2 {
  from { transform: translate3d(0,0,0) scale(1.1); }
  to   { transform: translate3d(-50px, -40px, 0) scale(0.9); }
}
@keyframes orbDrift3 {
  from { transform: translate3d(-50%, -50%, 0) scale(1); }
  to   { transform: translate3d(calc(-50% + 60px), calc(-50% - 40px), 0) scale(1.2); }
}

/* --- Hero content (foreground) --- */
.hero-content {
  position: relative;
  z-index: 10;
  transform: translate3d(calc(var(--mx) * 6px), calc(var(--my) * 6px), 0);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   HERO TYPOGRAPHY — calibrated 2026-04-08 for clean visual rhythm.
   The vertical descent is: Eyebrow → Headline → Tagline → Search.
   Each element shrinks ~50% of the previous so the eye flows down
   naturally and nothing competes for attention.
   ============================================================ */

/* --- Eyebrow "Schenectady · New York" --- */
/* Refined and proportionate to the headline, with short decorative
   bracket lines that only appear at desktop widths so they never
   crowd narrow viewports. */
.hero-eyebrow {
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.4em;
  color: #5eead4;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  opacity: 0;
  animation: heroFadeUp 0.9s 0.15s ease-out forwards;
  position: relative;
  display: inline-block;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6), 0 0 22px rgba(20, 184, 166, 0.45);
}
@media (min-width: 768px) {
  .hero-eyebrow { font-size: 1.2rem; letter-spacing: 0.45em; }
}
@media (min-width: 1024px) {
  .hero-eyebrow::before,
  .hero-eyebrow::after {
    content: '';
    display: inline-block;
    width: 44px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #5eead4, transparent);
    vertical-align: middle;
    margin: 0 1rem;
  }
}

/* --- Headline "Every Home Has a Story. / Yours Starts Here." ---
   The second line uses a rotating word (Starts / Unfolds / Begins / Lives)
   which has variable width. To prevent the line from wrapping when the
   longest word is shown — and shifting the entire layout below it —
   we apply THREE protections:
     1. white-space: nowrap on .line so it physically cannot wrap
     2. max-width raised to fit the longest variant ("Yours Unfolds Here.")
     3. min-width on .rotator reserved for the LONGEST word (7ch for Unfolds)
   The font-size clamp also gets a smaller max so the longest variant fits
   on a 1280px viewport without overflowing. */
.hero-headline {
  font-family: 'Cinzel Decorative', 'Cinzel', Georgia, serif;
  font-weight: 700;
  /* 2026-04-09: 10% size reduction per Vick + bumped max-width to 26ch
     so "Yours Unfolds Here" never gets squeezed into wrapping at any viewport. */
  font-size: clamp(1.53rem, 3.96vw, 3.24rem);
  line-height: 1.1;
  letter-spacing: 0.005em;
  color: #ffffff;
  text-shadow:
    0 4px 36px rgba(0, 0, 0, 0.55),
    0 0 70px rgba(6, 182, 212, 0.18);
  margin-bottom: 1.25rem;
  max-width: 26ch;
  margin-left: auto;
  margin-right: auto;
}

.hero-headline .line {
  display: block;
  opacity: 0;
  transform: translateY(28px);
  animation: heroFadeUp 1s ease-out forwards;
  /* CRITICAL: never wrap. The whole layout below depends on this. */
  white-space: nowrap;
}
.hero-headline .line:nth-child(1) { animation-delay: 0.3s; }
.hero-headline .line:nth-child(2) { animation-delay: 0.7s; }

.hero-headline .rotator {
  display: inline-block;
  /* Reserve enough width for the LONGEST rotator word ("Unfolds" = 7ch)
     so swapping between Starts/Unfolds/Begins/Lives never shifts the
     surrounding "Yours … Here." text by even one pixel. */
  min-width: 7ch;
  text-align: center;
  background: linear-gradient(135deg, #fde68a 0%, #f59e0b 50%, #fde68a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 4px 20px rgba(245, 158, 11, 0.45));
  position: relative;
}
.hero-headline .rotator::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 3px;
  background: linear-gradient(90deg, transparent, #f59e0b, transparent);
  border-radius: 2px;
  opacity: 0.6;
}

@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Tagline — flowing italic serif under the display headline.
   Sized smaller than the headline (3:1 ratio) so the eye knows
   it's secondary copy, but still elegant and readable at distance. */
.hero-tagline {
  font-family: 'Cormorant Garamond', 'Cinzel', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.05rem, 1.45vw, 1.3rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.01em;
  margin-top: 0.5rem;
  margin-bottom: 2.25rem;
  opacity: 0;
  animation: heroFadeUp 1s 1.1s ease-out forwards;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
}

/* --- Glassmorphic search panel ---
   Layout: 4 columns on desktop (Home Type · Bedrooms · Max Rent · Button)
           2x2 grid on tablet, full-stack on phones. The button always
           occupies its own column and is sized to match field height. */
.hero-search {
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 22px;
  padding: 1rem;
  box-shadow:
    0 25px 60px -20px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.15);
  max-width: 920px;
  width: 100%;
  margin: 0 auto;
  opacity: 0;
  animation: heroFadeUp 1s 1.4s ease-out forwards;
}

.hero-search .search-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;  /* Home Type · Bedrooms · Max Rent · Button */
  gap: 0.6rem;
  align-items: stretch;
}

.hero-search .search-field {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 0.6rem 0.85rem;
  text-align: left;
  transition: all 0.25s ease;
  min-width: 0;  /* allow children to shrink inside the grid track */
}
.hero-search .search-field:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.25);
}
.hero-search .search-field label {
  display: block;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #a5f3fc;
  margin-bottom: 0.15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-search .search-field select {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 center;
  background-size: 14px;
  padding-right: 20px;
  text-overflow: ellipsis;
}
.hero-search .search-field select option {
  background: #0a1424;
  color: #ffffff;
}

.hero-search .search-go {
  background: linear-gradient(135deg, #f59e0b 0%, #d4a017 100%);
  color: #0a1424;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: 12px;
  padding: 0 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-transform: uppercase;
  font-size: 0.85rem;
  box-shadow: 0 12px 30px -10px rgba(245, 158, 11, 0.6);
  transition: all 0.25s ease;
  white-space: nowrap;
  min-height: 60px;  /* match the height of a search-field with label + select */
}
.hero-search .search-go:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 18px 40px -10px rgba(245, 158, 11, 0.8);
}

/* Tablet — 2x2 grid (Home Type + Bedrooms on row 1, Max Rent + Button on row 2) */
@media (max-width: 1024px) {
  .hero-search .search-row {
    grid-template-columns: 1fr 1fr;
  }
}
/* Phone — full width, button below */
@media (max-width: 540px) {
  .hero-search .search-row {
    grid-template-columns: 1fr;
  }
  .hero-search .search-go {
    padding: 0.875rem 1.75rem;
  }
}

/* (.hero-caption removed — replaced by .hero-dots elegant slide indicators above) */

/* --- Scroll cue --- */
.hero-scroll-cue {
  position: absolute;
  right: 2.5rem;
  bottom: 2.5rem;
  z-index: 11;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  opacity: 0;
  animation: heroFadeUp 1s 1.8s ease-out forwards;
}
.hero-scroll-cue .line {
  width: 1px;
  height: 60px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), transparent);
  position: relative;
  overflow: hidden;
}
.hero-scroll-cue .line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 1), transparent);
  animation: scrollDot 2.4s ease-in-out infinite;
}
@keyframes scrollDot {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}

@media (max-width: 768px) {
  .hero-scroll-cue { display: none; }
}

@media (max-width: 640px) {
  .hero-headline {
    font-size: clamp(2.025rem, 9.9vw, 3.6rem);
  }
}

/* Mobile-friendly nav */
@media (max-width: 768px) {
  .desktop-nav { display: none; }
}

@media (min-width: 769px) {
  .mobile-nav { display: none; }
}

/* Status pill */
.status-pill {
  display: inline-flex;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.status-available { background: #dcfce7; color: #15803d; }
.status-rented { background: #fee2e2; color: #991b1b; }
.status-offline { background: #fef3c7; color: #92400e; }

/* Subtle scroll-driven reveal */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   2026-04-07 — Modern public navigation + bigger feature cards
   ============================================================ */

/* Logo wrapper — see-through. Two effects layered:
     1. A steady multi-stop luminous glow on the IMG (three drop-shadows that
        radiate outward in concentric rings of white → teal → cyan).
     2. A diagonal "headlight beam" highlight that sweeps across the wrapper
        every 5 seconds (Zakir Auto pattern, intensified for the light teal
        wordmark on a dark hero). The wrapper has overflow:hidden + border-
        radius so the sweep is cleanly clipped to a soft rectangular plate.
   The motion grabs attention exactly like a car headlight catching a chrome
   logo — visible, but never noisy or distracting. */
.logo-plate {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: none;
  padding: 0;                /* hug the IMG so the die-cut sweep aligns */
  position: relative;
  overflow: visible;         /* let the steady glow bleed out naturally */
  border-radius: 0;
  isolation: isolate;
}
/* The sweeping headlight beam — a thin diagonal band of bright light that
   slides from upper-left to lower-right across the logo. The pseudo-element
   sits exactly over the IMG and is masked to the wordmark PNG, so the band
   only renders inside the logo's opaque pixels (cursive lettering + house+key
   icon) — no rectangular box, no hard edges. The gradient is feathered so
   the leading and trailing edges fade smoothly into the steady drop-shadow
   glow already on the IMG. */
.logo-plate::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255, 255, 255, 0.05) 42%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(94, 234, 212, 0.42) 53%,
    rgba(255, 255, 255, 0.05) 58%,
    transparent 70%
  );
  background-size: 240% 100%;
  background-repeat: no-repeat;
  animation: logoHeadlight 5.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  pointer-events: none;
  /* Die-cut to the logo's silhouette */
  -webkit-mask-image: url('/assets/logos/schetoora-wordmark.png');
          mask-image: url('/assets/logos/schetoora-wordmark.png');
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  mix-blend-mode: screen;
  z-index: 2;
}
@keyframes logoHeadlight {
  0%   { background-position: -120% 0; }
  55%  { background-position: 220% 0; }
  100% { background-position: 220% 0; }   /* hold pause before next sweep */
}
/* Steady luminous glow on the IMG itself — concentric drop-shadows so the
   logo always looks like it's emitting light, independent of the sweep. The
   glow is intensified (5 stacked drop-shadows instead of 3, larger blur radii,
   higher alphas) to make the LLC wordmark and the house+key icon really pop. */
.logo-plate img {
  position: relative;
  z-index: 1;
  filter:
    drop-shadow(0 0 2px   rgba(255, 255, 255, 1.00))
    drop-shadow(0 0 6px   rgba(255, 255, 255, 0.95))
    drop-shadow(0 0 16px  rgba(94, 234, 212, 0.85))
    drop-shadow(0 0 30px  rgba(94, 234, 212, 0.55))
    drop-shadow(0 0 48px  rgba(13, 148, 136, 0.45));
}
/* In the scrolled (compact) state, the dark glassy nav background already
   provides separation — calm the glow and shorten the sweep cycle so it
   doesn't compete with the rest of the compact nav. */
html.scrolled .site-topnav .logo-plate {
  padding: 0.25rem 0.5rem;
  border-radius: 0.6rem;
}
html.scrolled .site-topnav .logo-plate::after {
  animation-duration: 6.5s;
  background: linear-gradient(
    115deg,
    transparent 32%,
    rgba(255, 255, 255, 0.06) 44%,
    rgba(255, 255, 255, 0.40) 50%,
    rgba(94, 234, 212, 0.30) 53%,
    rgba(255, 255, 255, 0.06) 56%,
    transparent 68%
  );
  background-size: 240% 100%;
  background-repeat: no-repeat;
  /* Mask is inherited from the base .logo-plate::after rule, so the sweep
     stays die-cut to the logo silhouette in both expanded + scrolled states. */
}
html.scrolled .site-topnav .logo-plate img {
  filter:
    drop-shadow(0 0 2px   rgba(255, 255, 255, 0.90))
    drop-shadow(0 0 6px   rgba(255, 255, 255, 0.65))
    drop-shadow(0 0 14px  rgba(94, 234, 212, 0.65))
    drop-shadow(0 0 24px  rgba(94, 234, 212, 0.35));
}

/* Top nav bar — FIXED position, 3-column grid
   Logo on the LEFT · menu items perfectly CENTERED · sign-in CTA on the RIGHT
   The 1fr columns on either side of the auto middle column ensure the menu
   sits exactly in the horizontal center of the viewport.

   When the page is scrolled past the hero (html.scrolled), the nav transitions
   to a compact glassy "stuck" state with a darker backdrop, less padding, and
   a smaller logo — see the .scrolled overrides below. */
.site-topnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 1rem 2rem;
  background: transparent;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  pointer-events: none;
  transition: padding 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              background 0.35s ease,
              backdrop-filter 0.35s ease,
              box-shadow 0.35s ease;
}
.site-topnav img {
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Scrolled state — activated by JS adding `.scrolled` to <html> after scrollY > 80 */
html.scrolled .site-topnav {
  padding: 0.5rem 2rem;
  background: rgba(10, 31, 61, 0.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 8px 32px -8px rgba(0, 0, 0, 0.45);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
html.scrolled .site-topnav .logo-plate img {
  height: 2.75rem !important;  /* shrink from h-20/h-24 to ~44px */
  max-height: 2.75rem !important;
}
html.scrolled .site-topnav .nav-link {
  padding: 0.55rem 1.25rem;
  font-size: 0.85rem;
}
html.scrolled .site-topnav .nav-cta {
  padding: 0.55rem 1.4rem;
  font-size: 0.72rem;
}
@media (min-width: 768px) {
  html.scrolled .site-topnav {
    padding: 0.65rem 3.5rem;
  }
}
.site-topnav > * { pointer-events: auto; }
.site-topnav > .logo-plate {
  justify-self: start;  /* logo flush left within its column */
}
.site-topnav > .desktop-nav {
  justify-self: center;  /* menu items perfectly centered in middle column */
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.site-topnav > .nav-cta {
  justify-self: end;  /* CTA flush right within its column */
}
@media (min-width: 768px) {
  .site-topnav { padding: 1.25rem 2.75rem; }
}

/* Top-nav text links — refined and proportionate to the rest of the hero
   typography. Cinzel matches the eyebrow + headline family for continuity.
   Hover lifts + glows + slides an animated gradient underline from center. */
.nav-link {
  display: inline-flex;
  align-items: center;
  padding: 0.7rem 1.25rem;
  color: rgba(255, 255, 255, 0.95);
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 0.6rem;
  position: relative;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
  transition: color 0.35s ease, transform 0.35s ease, background 0.35s ease, text-shadow 0.35s ease, letter-spacing 0.35s ease;
}
/* Soft inner halo that fades in on hover */
.nav-link::before {
  content: "";
  position: absolute;
  inset: 0.25rem 0.4rem;
  border-radius: 0.5rem;
  background: radial-gradient(ellipse at center, rgba(94, 234, 212, 0.18) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
/* Animated gradient underline that slides in from center */
.nav-link::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 0.4rem;
  height: 2px;
  background: linear-gradient(90deg, transparent, #5eead4 25%, #fde68a 50%, #5eead4 75%, transparent);
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(94, 234, 212, 0.6);
  transition: left 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              right 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-link:hover {
  color: #ecfeff;
  transform: translateY(-1px);
  letter-spacing: 0.26em;
  text-shadow: 0 0 22px rgba(103, 232, 249, 0.75), 0 2px 14px rgba(0, 0, 0, 0.55);
}
.nav-link:hover::before {
  opacity: 1;
}
.nav-link:hover::after {
  left: 1rem;
  right: 1rem;
}
@media (max-width: 1024px) {
  .nav-link { font-size: 0.85rem; padding: 0.6rem 1rem; letter-spacing: 0.15em; }
}

/* Nav CTA — sign in button, sized to match the nav-link rhythm */
.nav-cta {
  display: inline-flex;
  align-items: center;
  margin-left: 0.5rem;
  padding: 0.65rem 1.4rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: white;
  border-radius: 9999px;
  background: linear-gradient(135deg, #0d9488 0%, #0f4c5c 100%);
  box-shadow: 0 8px 24px -8px rgba(6, 182, 212, 0.6);
  transition: all 0.25s ease;
}
.nav-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -10px rgba(6, 182, 212, 0.8);
}

/* Modernized listing card — bigger, more visible, more shadow */
.listing-card {
  background: white;
  border-radius: 1.5rem;
  overflow: hidden;
  border: 1px solid var(--sc-border);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 10px 30px -15px rgba(15, 23, 42, 0.12);
}
.listing-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 35px 70px -20px rgba(6, 182, 212, 0.35), 0 25px 50px -20px rgba(15, 23, 42, 0.20);
  border-color: var(--sc-cyan);
}
.listing-card .img-wrap {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(135deg, #e0f2fe 0%, #cffafe 100%);
  position: relative;
}
.listing-card .img-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.35) 100%);
  pointer-events: none;
}
/* Logo watermark — bottom-right corner of every property photo on the public site.
   Uses the S CHETOORA wordmark with a soft white drop-shadow so it's visible on
   both bright and dark photos. Apr 9 2026 — Vick: "watermark logo on all images
   displayed in the back end and front end, not in editors". */
.listing-card .img-wrap::before,
.property-hero-photo::before,
.property-thumb-photo::before {
  content: "";
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 88px;
  height: 32px;
  background-image: url('/assets/logos/schetoora-wordmark.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right bottom;
  opacity: 0.78;
  pointer-events: none;
  z-index: 3;
  filter:
    drop-shadow(0 0 2px rgba(255, 255, 255, 0.95))
    drop-shadow(0 0 6px rgba(255, 255, 255, 0.65))
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
}
/* Hero photo on /property/{id} — bigger watermark since the photo is huge */
.property-hero-photo::before {
  width: 132px;
  height: 48px;
  bottom: 16px;
  right: 16px;
}
/* Thumbnail strip — smaller watermark (still visible) */
.property-thumb-photo::before {
  width: 56px;
  height: 20px;
  bottom: 6px;
  right: 6px;
  opacity: 0.7;
}

.listing-card .img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.listing-card:hover .img-wrap img {
  transform: scale(1.10);
}

/* Modernized companies section card */
.company-card {
  background: white;
  border-radius: 1.5rem;
  padding: 2.5rem 2rem;
  border: 1px solid var(--sc-border);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 10px 30px -15px rgba(15, 23, 42, 0.10);
  position: relative;
  overflow: hidden;
}
.company-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(6, 182, 212, 0) 0%, rgba(6, 182, 212, 0.06) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.company-card:hover {
  transform: translateY(-8px);
  border-color: var(--sc-cyan);
  box-shadow: 0 30px 60px -15px rgba(6, 182, 212, 0.25);
}
.company-card:hover::before { opacity: 1; }
.company-card > * { position: relative; }

/* ============================================================
   2026-04-09 — Public chat widget (floating bottom-right)
   AI-powered leasing assistant for visitors. Answers questions about
   available apartments, rent, location — and links straight to listings.
   ============================================================ */

.chat-widget {
  position: fixed;
  /* Raised an extra ~half inch per Vick 2026-04-09 (was 5.25rem). */
  bottom: 8.25rem;
  right: 1.75rem;
  z-index: 60;
  font-family: 'Inter', sans-serif;
  display: flex;
  /* column-reverse → Maya on TOP, WhatsApp on BOTTOM (per Vick 2026-04-09 swap) */
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 12px;
}

/* WhatsApp shortcut launcher — sits above the Maya bubble. Click → opens
   wa.me/15185773002 in a new tab so visitors can ping Rohan directly with
   anything Maya can't answer. Per Vick 2026-04-09. */
.chat-wa-launcher {
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  background: #25d366;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 2px solid #ffffff;
  box-shadow:
    0 14px 32px -8px rgba(37, 211, 102, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.chat-wa-launcher:hover {
  transform: translateY(-2px) scale(1.06);
  box-shadow:
    0 20px 42px -10px rgba(37, 211, 102, 0.7),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}
.chat-wa-launcher svg {
  width: 30px;
  height: 30px;
}

/* Floating launcher button — Maya's photo wrapped in a chat-bubble badge */
.chat-launcher {
  width: 64px;
  height: 64px;
  border-radius: 9999px;
  background: #0a1424;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  padding: 0;
  overflow: visible;
  box-shadow:
    0 18px 40px -10px rgba(13, 148, 136, 0.55),
    0 0 0 2px rgba(94, 234, 212, 0.55),
    0 0 0 1px rgba(255,255,255,0.06) inset;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
  position: relative;
}
.chat-launcher:hover {
  transform: translateY(-3px) scale(1.06);
  box-shadow:
    0 25px 50px -10px rgba(13, 148, 136, 0.7),
    0 0 0 3px rgba(94, 234, 212, 0.85),
    0 0 0 1px rgba(255,255,255,0.08) inset;
}
.chat-launcher img {
  width: 100%;
  height: 100%;
  border-radius: 9999px;
  object-fit: cover;
  display: block;
}
.chat-launcher .chat-launcher-badge {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 26px;
  height: 26px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #0d9488 0%, #0f4c5c 100%);
  border: 2px solid #0a1424;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(13, 148, 136, 0.5);
}
.chat-launcher .chat-launcher-badge svg {
  width: 14px;
  height: 14px;
}
.chat-launcher::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 9999px;
  background: radial-gradient(circle, rgba(94, 234, 212, 0.4) 0%, transparent 70%);
  animation: chatPulse 2.6s ease-in-out infinite;
  z-index: -1;
}
@keyframes chatPulse {
  0%, 100% { transform: scale(1);   opacity: 0.6; }
  50%      { transform: scale(1.2); opacity: 0; }
}

/* Open chat panel — slides up from bottom-right */
.chat-panel {
  width: min(380px, calc(100vw - 2rem));
  height: min(600px, calc(100vh - 4rem));
  background: #ffffff;
  border-radius: 22px;
  box-shadow:
    0 35px 80px -20px rgba(15, 23, 42, 0.45),
    0 0 0 1px rgba(15, 23, 42, 0.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform-origin: bottom right;
  animation: chatSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes chatSlideIn {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Header */
.chat-header {
  background: linear-gradient(135deg, #0a1424 0%, #0d9488 100%);
  color: white;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}
.chat-header .avatar {
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
  overflow: hidden;
  border: 2px solid rgba(94, 234, 212, 0.5);
  box-shadow: 0 2px 12px rgba(13, 148, 136, 0.35);
}
.chat-header .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.chat-header .title {
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-header .subtitle {
  font-size: 0.65rem;
  opacity: 0.85;
  margin-top: 0.15rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-header .subtitle .powered-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.chat-header .subtitle .powered-logo img {
  height: 18px;
  width: auto;
  vertical-align: middle;
  filter: brightness(1.15);
  transition: opacity 0.2s;
}
.chat-header .subtitle .powered-logo:hover img { opacity: 0.85; }
.chat-header .close-btn {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  cursor: pointer;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-header .close-btn:hover { background: rgba(255, 255, 255, 0.2); }

/* Message area */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.25rem;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.chat-messages::-webkit-scrollbar { width: 8px; }
.chat-messages::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

.chat-msg { max-width: 82%; }
.chat-msg.user {
  align-self: flex-end;
  background: linear-gradient(135deg, #0d9488 0%, #0f4c5c 100%);
  color: white;
  padding: 0.65rem 0.95rem;
  border-radius: 18px 18px 4px 18px;
  font-size: 0.9rem;
  line-height: 1.45;
}
.chat-msg.bot {
  align-self: flex-start;
  background: white;
  color: #1e293b;
  padding: 0.75rem 1rem;
  border-radius: 18px 18px 18px 4px;
  font-size: 0.9rem;
  line-height: 1.5;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 8px -3px rgba(15, 23, 42, 0.08);
}
.chat-msg.bot a {
  color: #0d9488;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(13, 148, 136, 0.4);
}
.chat-msg.bot a:hover { text-decoration-color: #0d9488; }

/* Listing cards rendered under bot messages */
.chat-listings {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.6rem;
}
.chat-listing-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  text-decoration: none;
  color: #1e293b;
  transition: all 0.2s ease;
}
.chat-listing-card:hover {
  border-color: #0d9488;
  background: #f0fdfa;
  transform: translateX(2px);
}
.chat-listing-card .meta { flex: 1; min-width: 0; }
.chat-listing-card .meta .addr {
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-listing-card .meta .specs {
  font-size: 0.68rem;
  color: #64748b;
  margin-top: 0.1rem;
}
.chat-listing-card .rent {
  font-size: 0.85rem;
  font-weight: 800;
  color: #0d9488;
  flex-shrink: 0;
}

/* Typing indicator */
.chat-typing {
  align-self: flex-start;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 18px 18px 18px 4px;
  padding: 0.85rem 1rem;
  display: flex;
  gap: 0.3rem;
}
.chat-typing span {
  width: 6px;
  height: 6px;
  background: #94a3b8;
  border-radius: 50%;
  animation: chatBounce 1.2s ease-in-out infinite;
}
.chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.chat-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes chatBounce {
  0%, 80%, 100% { transform: translateY(0);    opacity: 0.4; }
  40%           { transform: translateY(-6px); opacity: 1;   }
}

/* Input area */
.chat-input-area {
  flex-shrink: 0;
  border-top: 1px solid #e2e8f0;
  background: white;
  padding: 0.85rem 1rem;
  display: flex;
  gap: 0.55rem;
  align-items: flex-end;
}
.chat-input-area textarea {
  flex: 1;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 0.6rem 0.85rem;
  font-size: 0.9rem;
  font-family: inherit;
  resize: none;
  outline: none;
  max-height: 110px;
  background: #f8fafc;
  transition: border-color 0.2s;
}
.chat-input-area textarea:focus {
  border-color: #0d9488;
  background: white;
}
.chat-input-area button {
  background: linear-gradient(135deg, #0d9488 0%, #0f4c5c 100%);
  color: white;
  border: none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s, box-shadow 0.2s;
}
.chat-input-area button:hover:not(:disabled) {
  transform: scale(1.05);
  box-shadow: 0 6px 18px -4px rgba(13, 148, 136, 0.5);
}
.chat-input-area button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.chat-input-area button svg { width: 18px; height: 18px; }

/* Welcome quick-reply chips */
.chat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.6rem;
}
.chat-chip {
  background: white;
  border: 1px solid #cbd5e1;
  color: #475569;
  font-size: 0.75rem;
  padding: 0.4rem 0.75rem;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.2s;
}
.chat-chip:hover {
  border-color: #0d9488;
  color: #0d9488;
  background: #f0fdfa;
}

@media (max-width: 540px) {
  .chat-widget { bottom: 4.5rem; right: 1rem; gap: 10px; }
  .chat-launcher { width: 56px; height: 56px; }
  .chat-wa-launcher { width: 50px; height: 50px; }
  .chat-wa-launcher svg { width: 26px; height: 26px; }
  .chat-panel {
    width: calc(100vw - 1rem);
    height: calc(100vh - 5rem);
    bottom: 1rem;
    right: 0.5rem;
  }
}

/* ============================================================
   Maya enhancements (2026-04-09) — speaker, handoff, CTAs
   ============================================================ */

/* The chat panel needs position:relative so the handoff form can absolutely
   position itself above the input area. */
.chat-panel { position: relative; }

/* Speaker icon next to bot messages */
.chat-speak-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 0.8rem;
  margin-top: 0.4rem;
  padding: 0.15rem 0.4rem;
  border-radius: 6px;
  color: #94a3b8;
  transition: background 0.2s, color 0.2s;
  display: inline-flex;
  align-items: center;
}
.chat-speak-btn:hover { background: #f0fdfa; color: #0d9488; }

/* Handoff CTA row (under bot replies) */
.chat-cta-row {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.55rem;
  flex-wrap: wrap;
}
.chat-cta {
  background: white;
  border: 1.5px solid #0d9488;
  color: #0d9488;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 0.45rem 0.85rem;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.chat-cta:hover {
  background: #0d9488;
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -6px rgba(13, 148, 136, 0.5);
}

/* Handoff form (slide-up overlay above the input area) */
.chat-handoff-form {
  position: absolute;
  bottom: 76px;
  left: 1rem;
  right: 1rem;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 1rem;
  box-shadow: 0 -8px 30px -5px rgba(15, 23, 42, 0.2);
  z-index: 10;
  animation: chatHandoffSlide 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes chatHandoffSlide {
  from { opacity: 0; transform: translateY(15px); }
  to   { opacity: 1; transform: translateY(0); }
}
.chat-handoff-input {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 0.55rem 0.85rem;
  font-size: 0.88rem;
  outline: none;
  transition: border-color 0.2s;
}
.chat-handoff-input:focus { border-color: #0d9488; }
.chat-handoff-submit {
  width: 100%;
  background: linear-gradient(135deg, #0d9488 0%, #0f4c5c 100%);
  color: white;
  border: none;
  padding: 0.65rem;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.chat-handoff-submit:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -4px rgba(13, 148, 136, 0.5);
}
.chat-handoff-submit:disabled { opacity: 0.5; cursor: not-allowed; }


/* ============================================================
   HERO THEME VARIANT — IRIS APERTURE
   Active when <body data-hero-theme="iris">
   Default theme (no attribute or "shutter") keeps the existing
   horizontal-blade camera shutter behavior — those rules above
   are unchanged. The selectors below override them with higher
   specificity ONLY when the iris theme is active.
   ============================================================ */

/* Page-load: dark cover shrinks circularly from full to nothing
   (like an SLR iris opening from closed to wide-open) */
body[data-hero-theme="iris"] .shutter-intro {
  background: radial-gradient(circle at center, #0a1424 0%, #000 80%);
  clip-path: circle(150% at center);
  animation: irisIntroOpen 1.7s 0.18s cubic-bezier(0.83, 0, 0.17, 1) forwards;
}

@keyframes irisIntroOpen {
  0%   { clip-path: circle(150% at center); }
  100% { clip-path: circle(0%   at center); }
}

/* Hide the horizontal blades from the default shutter intro */
body[data-hero-theme="iris"] .shutter-intro .blade { display: none; }

/* Override the SLR ring — bigger, rotates, stays longer, with cyan glow */
body[data-hero-theme="iris"] .shutter-intro .ring {
  width: 340px; height: 340px;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  box-shadow:
    0 0 60px rgba(165, 243, 252, 0.30),
    inset 0 0 30px rgba(255, 255, 255, 0.08);
  animation: irisRingExpand 1.9s ease-out forwards;
}
body[data-hero-theme="iris"] .shutter-intro .ring::after {
  inset: 22px;
  border: 1px solid rgba(255, 255, 255, 0.35);
}
body[data-hero-theme="iris"] .shutter-intro .ring::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px dashed rgba(165, 243, 252, 0.4);
  border-radius: 50%;
}

@keyframes irisRingExpand {
  0%   { opacity: 0;    transform: translate(-50%, -50%) scale(0)   rotate(0deg); }
  12%  { opacity: 0.95; transform: translate(-50%, -50%) scale(0.4) rotate(20deg); }
  60%  { opacity: 0.55; transform: translate(-50%, -50%) scale(1.6) rotate(180deg); }
  100% { opacity: 0;    transform: translate(-50%, -50%) scale(2.8) rotate(360deg); }
}

/* Inter-slide IRIS WIPE — each slide irises in/out from center */
body[data-hero-theme="iris"] .hero-slideshow .slide {
  opacity: 1;                                /* clip-path now controls visibility */
  clip-path: circle(0% at center);
  transition: clip-path 0.95s cubic-bezier(0.83, 0, 0.17, 1);
  will-change: clip-path, transform;
}

body[data-hero-theme="iris"] .hero-slideshow .slide.is-active {
  clip-path: circle(150% at center);
  /* kenBurns animation already inherited from default rule */
}

/* Hide the default shutter blade overlay when iris is active */
body[data-hero-theme="iris"] .shutter-flash .blade { display: none; }

/* Pulsing ring at center on every slide change — anchored to .shutter-flash.click */
body[data-hero-theme="iris"] .shutter-flash::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 260px; height: 260px;
  border: 1.5px solid rgba(255, 255, 255, 0);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
}
body[data-hero-theme="iris"] .shutter-flash.click::before {
  animation: irisRingPulse 0.95s cubic-bezier(0.7, 0, 0.3, 1) forwards;
}

/* Inner concentric dashed ring for extra aperture detail */
body[data-hero-theme="iris"] .shutter-flash::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 130px; height: 130px;
  border: 1px dashed rgba(165, 243, 252, 0);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
}
body[data-hero-theme="iris"] .shutter-flash.click::after {
  animation: irisRingPulse 0.95s 0.08s cubic-bezier(0.7, 0, 0.3, 1) forwards;
}

@keyframes irisRingPulse {
  0%   { border-color: rgba(255, 255, 255, 0.85); transform: translate(-50%, -50%) scale(0.3); opacity: 1;   box-shadow: 0 0 30px rgba(165, 243, 252, 0.5); }
  55%  { border-color: rgba(255, 255, 255, 0.45); transform: translate(-50%, -50%) scale(1.6); opacity: 0.7; box-shadow: 0 0 60px rgba(165, 243, 252, 0.25); }
  100% { border-color: rgba(255, 255, 255, 0);    transform: translate(-50%, -50%) scale(2.8); opacity: 0;   box-shadow: 0 0 80px rgba(165, 243, 252, 0); }
}