/* =========================================================
   One Ummah — A Masjid for the Muslim Filipinos of the Philippines
   Warm natural palette · subtle Islamic geometry · parallax
   ========================================================= */

:root {
  --ivory: #FAF7F2;
  --sand: #EFE7DA;
  --sand-deep: #E2D6C2;
  --clay: #B8693F;
  --clay-soft: #D9A27E;
  --bark: #2C221C;
  --bark-soft: #4A3B31;
  --moss: #4F6F52;
  --blossom: #F5D67A;
  --apricot: #F2B06A;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

* { font-family: "Helvetica Now Text", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }

html { scroll-behavior: smooth; }
html, body { overscroll-behavior-y: none; }
body { background: var(--ivory); color: var(--bark); }

::selection { background: var(--blossom); color: var(--bark); }

/* Accessible skip link */
.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  background: var(--bark); color: #fff; padding: .6rem 1rem; border-radius: 999px; font-size: .875rem;
  transition: top .2s var(--ease-out-expo);
}
.skip-link:focus { top: 1rem; outline: 2px solid var(--blossom); }

:focus-visible { outline: 2px solid var(--blossom); outline-offset: 3px; border-radius: 6px; }

/* ---------- Loading state ---------- */
.app-loader {
  position: fixed; inset: 0; display: grid; place-content: center; gap: 1rem; text-align: center;
  background: var(--bark); color: rgba(255,255,255,.75); font-size: .875rem; letter-spacing: .01em;
}
.app-loader-mark { display: grid; place-items: center; animation: loader-pulse 1.6s ease-in-out infinite; }
@keyframes loader-pulse { 0%,100% { transform: scale(1) rotate(0deg); opacity: .8; } 50% { transform: scale(1.12) rotate(45deg); opacity: 1; } }

/* ---------- Liquid glass (from template) ---------- */
.liquid-glass {
  background: rgba(255, 255, 255, 0.01);
  background-blend-mode: luminosity;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}
.liquid-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,
    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
    rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
/* Dark-surface variant of glass used on light sections */
.liquid-glass-dark {
  background: rgba(44, 34, 28, 0.04);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.6), 0 1px 0 rgba(44,34,28,.04);
  position: relative; overflow: hidden;
}
.liquid-glass-dark::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.2px;
  background: linear-gradient(180deg, rgba(44,34,28,.18), rgba(44,34,28,.04) 40%, rgba(44,34,28,.04) 60%, rgba(44,34,28,.16));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}

/* ---------- Template utilities ---------- */
@keyframes dropdown-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.animate-dropdown { animation: dropdown-in 0.2s ease-out; }
.duration-400 { transition-duration: 400ms; }
.ease-out-expo { transition-timing-function: var(--ease-out-expo); }

/* ---------- Highlighter (gradient text) ---------- */
.hl {
  background: linear-gradient(95deg, #FFF3C4 0%, var(--blossom) 35%, var(--apricot) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-fill-color: transparent;
}
.hl-dark {
  background: linear-gradient(95deg, var(--clay) 0%, #C97B4A 50%, var(--moss) 130%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-fill-color: transparent;
}
/* Marker style highlight for body copy */
.mark {
  background: linear-gradient(transparent 55%, rgba(245,214,122,.55) 55%, rgba(242,176,106,.55));
  padding: 0 .1em; border-radius: 2px;
}

/* ---------- Hero sizing (svh avoids mobile browser-chrome jump; cap for very tall screens) ---------- */
.hero-stage { height: 100vh; height: 100svh; max-height: 1200px; }

/* ---------- Hero video stack ---------- */
.hero-video {
  position: absolute; left: 0; width: 100%;
  /* Crop the top ~14% of the source clip (burned-in mock UI) */
  height: 116%; top: -16%;
  object-fit: cover; object-position: center bottom;
  will-change: transform;
}
.hero-blossoms {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center bottom;
  mix-blend-mode: screen; opacity: .9; pointer-events: none;
}
.hero-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(20,14,10,.42) 0%, rgba(20,14,10,.08) 30%, rgba(20,14,10,0) 55%, rgba(20,14,10,.35) 100%);
}

/* Scroll cue */
@keyframes cue { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(14px); opacity: 0; } }
.scroll-cue-dot { animation: cue 1.8s var(--ease-out-expo) infinite; }

/* ---------- Parallax stage ---------- */
.parallax-layer { will-change: transform; }
.sheet {
  position: relative; z-index: 10;
  border-top-left-radius: 2rem; border-top-right-radius: 2rem;
  box-shadow: 0 -20px 60px rgba(20,14,10,.25);
}
@media (min-width: 768px) { .sheet { border-top-left-radius: 2.5rem; border-top-right-radius: 2.5rem; } }

/* ---------- Islamic geometry (8-point star lattice, very subtle) ---------- */
.geo-pattern {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120' fill='none' stroke='%232C221C' stroke-width='0.7'><path d='M60 6 L78 24 L102 24 L102 48 L120 66 L102 84 L102 108 L78 108 L60 126 L42 108 L18 108 L18 84 L0 66 L18 48 L18 24 L42 24 Z' opacity='.55'/><path d='M60 30 L84 60 L60 90 L36 60 Z'/><circle cx='60' cy='60' r='7'/><path d='M0 0 L18 24 M120 0 L102 24 M0 120 L18 108 M120 120 L102 108' opacity='.5'/></svg>");
  background-size: 120px 120px;
}
.geo-pattern-light {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120' fill='none' stroke='%23ffffff' stroke-width='0.7'><path d='M60 6 L78 24 L102 24 L102 48 L120 66 L102 84 L102 108 L78 108 L60 126 L42 108 L18 108 L18 84 L0 66 L18 48 L18 24 L42 24 Z' opacity='.55'/><path d='M60 30 L84 60 L60 90 L36 60 Z'/><circle cx='60' cy='60' r='7'/></svg>");
  background-size: 120px 120px;
}
.geo-fade {
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity .9s var(--ease-out-expo), transform .9s var(--ease-out-expo);
  transition-delay: var(--d, 0ms);
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-scale { opacity: 0; transform: scale(.96); transition: opacity 1s var(--ease-out-expo), transform 1s var(--ease-out-expo); transition-delay: var(--d, 0ms); }
.reveal-scale.is-visible { opacity: 1; transform: none; }

/* Word-by-word heading reveal */
.words .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .14em; margin-bottom: -.14em; }
.words .w > span { display: inline-block; transform: translateY(110%); transition: transform 1s var(--ease-out-expo); transition-delay: calc(var(--i) * 70ms); }
.words.is-visible .w > span { transform: translateY(0); }

/* ---------- Blueprint drawing (scroll driven via --p 0..1) ---------- */
.blueprint { --p: 0; }
.blueprint .bp-line {
  stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p));
  transition: stroke-dashoffset .12s linear;
}
.blueprint .bp-fill { opacity: calc(max(0, (var(--p) - 0.55) * 2.2)); transition: opacity .12s linear; }
.blueprint .bp-grid { opacity: calc(0.5 - var(--p) * 0.4); }
.blueprint .bp-glow { opacity: calc(max(0, (var(--p) - 0.6) * 2)); }
.bp-label { font-variant-numeric: tabular-nums; letter-spacing: .08em; }

/* ---------- Cards ---------- */
.card {
  background: #fff; border-radius: 1.5rem;
  border: 1px solid rgba(44,34,28,.07);
  box-shadow: 0 1px 0 rgba(44,34,28,.04), 0 12px 40px -24px rgba(44,34,28,.25);
  transition: transform .5s var(--ease-out-expo), box-shadow .5s var(--ease-out-expo), border-color .3s;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(44,34,28,.05), 0 30px 60px -30px rgba(44,34,28,.35); border-color: rgba(44,34,28,.12); }
.card-icon {
  width: 2.75rem; height: 2.75rem; border-radius: .9rem; display: grid; place-items: center;
  background: linear-gradient(145deg, var(--sand), #fff); color: var(--clay);
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(44,34,28,.08);
}

/* ---------- Buttons ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; transition: transform .35s var(--ease-out-expo), background-color .3s, color .3s, box-shadow .3s; }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--bark); color: #fff; }
.btn-primary:hover { background: #3a2d25; box-shadow: 0 12px 30px -14px rgba(44,34,28,.6); }
.btn-outline { border: 1px solid rgba(44,34,28,.18); color: var(--bark); }
.btn-outline:hover { background: rgba(44,34,28,.04); }
.btn-clay { background: var(--clay); color: #fff; }
.btn-clay:hover { background: #a65b35; }

/* Floating CTA */
.float-cta { transition: transform .5s var(--ease-out-expo), opacity .4s; }
.float-cta.hidden-cta { transform: translateY(20px); opacity: 0; pointer-events: none; }

/* Chips */
.chip { display: inline-flex; align-items: center; gap: .4rem; border-radius: 999px; padding: .35rem .8rem; font-size: .75rem; font-weight: 500; letter-spacing: .02em; }
/* Large, legible hero chip ("An open invitation · The Philippines") */
.chip-lg {
  gap: .6rem; padding: .7rem 1.25rem; font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600;
  background: rgba(44,34,28,.28); color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.35);
}
@media (min-width: 640px) { .chip-lg { font-size: 1.05rem; padding: .8rem 1.5rem; } }
@media (min-width: 1024px) { .chip-lg { font-size: 1.15rem; padding: .9rem 1.75rem; } }
.chip-soft { background: var(--sand); color: var(--bark-soft); }
.chip-tba { background: rgba(79,111,82,.1); color: var(--moss); }

/* Placeholders */
.placeholder { border: 1px dashed rgba(44,34,28,.25); color: var(--bark-soft); background: repeating-linear-gradient(135deg, rgba(44,34,28,.025) 0 8px, transparent 8px 16px); }

/* Counters */
.tnum { font-variant-numeric: tabular-nums; }

/* Timeline */
.timeline::before { content: ''; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(var(--sand-deep), rgba(44,34,28,.06)); }
.timeline-dot { width: 23px; height: 23px; border-radius: 999px; display: grid; place-items: center; background: #fff; border: 1px solid var(--sand-deep); }
.timeline-dot.is-active { border-color: var(--clay); box-shadow: 0 0 0 6px rgba(184,105,63,.12); }
.timeline-dot.is-active span { width: 9px; height: 9px; border-radius: 999px; background: var(--clay); }

/* Map placeholder */
.dot-map {
  background-image: radial-gradient(rgba(44,34,28,.22) 1px, transparent 1.2px);
  background-size: 14px 14px;
  -webkit-mask-image: radial-gradient(ellipse at 55% 50%, #000 40%, transparent 80%);
  mask-image: radial-gradient(ellipse at 55% 50%, #000 40%, transparent 80%);
}
@keyframes ping { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(3.2); opacity: 0; } }
.map-pin-ring { animation: ping 2.2s var(--ease-out-expo) infinite; }

/* Form */
.field {
  width: 100%; border-radius: .9rem; border: 1px solid rgba(44,34,28,.14); background: #fff; padding: .8rem 1rem; font-size: .9rem;
  transition: border-color .2s, box-shadow .2s;
}
.field:focus { outline: none; border-color: var(--clay); box-shadow: 0 0 0 4px rgba(184,105,63,.12); }
.field::placeholder { color: rgba(44,34,28,.4); }

/* Spinner */
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin .8s linear infinite; }

/* Divider line drawn with scroll */
.rule { height: 1px; background: linear-gradient(90deg, transparent, rgba(44,34,28,.2), transparent); }

/* ---------- Photo layers (free stock, Pexels) with slow Ken Burns drift ---------- */
.photo-layer { position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover; pointer-events: none; will-change: transform; }
@keyframes kenburns { 0% { transform: scale(1) translate3d(0,0,0); } 100% { transform: scale(1.10) translate3d(-1.5%, -1.5%, 0); } }
.kenburns { animation: kenburns 28s ease-in-out infinite alternate; }
.photo-grain::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .18; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.photo-card { border-radius: 1.5rem; overflow: hidden; position: relative; }
.photo-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease-out-expo); }
.photo-card:hover img { transform: scale(1.04); }
.photo-caption { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; }

/* ---------- Infinite dhikr marquee ---------- */
.marquee { position: relative; overflow: hidden; white-space: nowrap; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: inline-flex; align-items: center; width: max-content; animation: marquee var(--speed, 60s) linear infinite; will-change: transform; }
.marquee-track.reverse { animation-direction: reverse; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
.marquee-item {
  display: inline-flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.5rem);
  padding-right: clamp(1rem, 2.5vw, 2.5rem);
  font-size: clamp(2.6rem, 7.5vw, 7rem); line-height: 1.05; font-weight: 500; letter-spacing: -0.035em;
}
.marquee-item .marquee-star { font-size: .32em; opacity: .55; transform: translateY(-.08em); }
.marquee-sm .marquee-item { font-size: clamp(1.4rem, 3.4vw, 2.6rem); font-weight: 500; letter-spacing: -0.02em; }
.marquee-outline { color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.55); }
.marquee-outline-dark { color: transparent; -webkit-text-stroke: 1px rgba(44,34,28,.5); }

/* ---------- Master plan (masjid · residences · schools) ---------- */
.plan-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 1.5rem; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform .5s var(--ease-out-expo), background-color .4s, border-color .4s; }
.plan-card:hover { transform: translateY(-4px); background: rgba(255,255,255,.09); border-color: rgba(245,214,122,.45); }
.plan-num { font-variant-numeric: tabular-nums; letter-spacing: -.04em; }

/* ---------- Contact tiles ---------- */
.contact-tile { display: flex; align-items: center; gap: 1rem; border-radius: 1.25rem; padding: 1rem 1.25rem; border: 1px solid rgba(44,34,28,.1); background: #fff; transition: transform .4s var(--ease-out-expo), box-shadow .4s, border-color .3s; }
.contact-tile:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -28px rgba(44,34,28,.4); border-color: rgba(44,34,28,.2); }
.contact-tile-icon { width: 2.75rem; height: 2.75rem; border-radius: 999px; display: grid; place-items: center; flex-shrink: 0; }
.btn-whatsapp { background: #25D366; color: #0b3d1f; }
.btn-whatsapp:hover { background: #1fc65b; box-shadow: 0 14px 30px -14px rgba(37,211,102,.7); }

/* Ummah dots (world map feel) */
.ummah-dots { background-image: radial-gradient(rgba(245,214,122,.5) 1px, transparent 1.3px); background-size: 18px 18px; -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%); }

/* Reduced motion (system preference, or ?static=1 for crawlers/testing) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal-scale, .words .w > span { transition: none !important; opacity: 1 !important; transform: none !important; }
  .parallax-layer { transform: none !important; }
  .scroll-cue-dot, .map-pin-ring, .app-loader-mark, .kenburns { animation: none !important; }
  .marquee-track { animation-duration: 240s !important; }
  .blueprint { --p: 1 !important; }
}
html.no-motion .reveal, html.no-motion .reveal-scale, html.no-motion .words .w > span { transition: none !important; opacity: 1 !important; transform: none !important; }
html.no-motion .parallax-layer { transform: none !important; }
html.no-motion .blueprint { --p: 1 !important; }
html.no-motion .kenburns, html.no-motion .marquee-track { animation-play-state: paused !important; }