/* ==========================================================
   NARAYANA JOY AKASHA SANCTUARIES — WELCOME PAGE STYLESHEET
   Rebuilt clean 19 August 2026. This is a dedicated, standalone
   stylesheet for index.html only (a brand new filename, never
   cached before by any browser) — separate from css/style.css,
   which the Sanctuaries pages still use. Page is just three
   sections: Hero (full image + Enter) → Essence (two sentences)
   → Closing Band (turquoise, sampled from the Hero artwork).
   ========================================================== */

:root {
  --gold-deep:   #A8761E;
  --teal:        #0B565E;
  --white:       #FFFFFF;
  --text-dark:   #164852;
  --serif:       'Cormorant Garamond', Georgia, serif;
  --sans:        'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--sans); font-weight:300; background: var(--white); color: var(--text-dark); line-height:1.7; }
img { max-width:100%; display:block; }
a { color:inherit; }
/* Default word-link colour for running text — paragraphs, list items, table
   cells, blockquotes and image captions — so every inline link stands out
   from body copy site-wide, regardless of which container wraps it. More
   specific rules (nav, buttons, card-title headings, footer citations, and
   any bespoke per-section rule) still win over this and are unaffected. */
p a, li a, td a, blockquote a, figcaption a, dd a, dt a {
  color: var(--gold-deep);
  text-decoration-color: var(--border);
  text-underline-offset: 2px;
}
p a:hover, li a:hover, td a:hover, blockquote a:hover, figcaption a:hover, dd a:hover, dt a:hover {
  text-decoration-color: var(--teal);
}

/* ===== HERO — full viewport height, complete uncropped artwork (foreground included),
   running right to the top of the page with no chrome above it. Single "Enter" prompt. ===== */
.hero-full {
  position:relative;
  width:100%;
  height: 100vh;
  background-image: url('../assets/hero-site-entry.jpg');
  background-size: cover;
  background-position: center 40%;
  overflow:hidden;
}
.hero-full::after {
  content:"";
  position:absolute; inset:0; z-index:1;
  /* Lightened 29 Aug 2026 at Peter's request — the white fade was washing out too much
     of the image detail; same shape, gentler opacities throughout. */
  background:
    linear-gradient(180deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.06) 6%, rgba(255,255,255,0) 14%, rgba(255,255,255,0) 78%, rgba(255,255,255,.16) 92%, rgba(255,255,255,.28) 100%);
  pointer-events:none;
}

/* ===== BREATH PULSE — shared by every glow point on this page (and mirrored
   identically in css/freedoms-gate.css). Built to the literal shape of a
   7-7-7 breath rather than a generic animation: 7s growing brighter as the
   in-breath, 7s held at full brightness, 7s fading back down as the
   out-breath — 21s total, ease-in-out so each transition has the soft
   acceleration/deceleration of an actual breath rather than a mechanical
   ramp. Every glow element on the page shares animation-delay:0s, so the
   whole Hero breathes as one — no staggered rings, no offset copies. This
   count can change later; it's built as a single named keyframe so
   updating the timing means changing one number in one place. ===== */
@keyframes breath-pulse {
  0%     { transform:scale(.8);  opacity:0; }
  33.33% { transform:scale(1.28); opacity:.72; }
  66.66% { transform:scale(1.28); opacity:.72; }
  100%   { transform:scale(.8);  opacity:0; }
}

/* ===== PLAQUE RADIANCE — a pale bloom of light breathing out from the centre of the
   compass medallion.
   Position verified by actually rendering the Hero crop (cover + position:center 40%, at
   1893x900 — Peter's own window size) and locating the star's centre in the result: it lands at
   49.7% across / 77.8% down that render. Backed out to the underlying formula, the compass sits
   at roughly 67% down the source artwork itself, giving an on-screen position of 40vh + 18vw —
   this holds at any window width/height, not just the one tested. ===== */
.plaque-glow {
  position:absolute; left:50%; top: calc(40vh + 18vw);
  width: clamp(120px,12vw,200px); height: clamp(120px,12vw,200px);
  transform: translate(-50%,-50%);
  z-index:2; pointer-events:none;
}
.plaque-glow::before {
  content:""; position:absolute; inset:0; border-radius:50%;
  background: radial-gradient(circle, rgba(255,252,232,.7) 0%, rgba(255,244,210,.34) 42%, rgba(255,244,210,0) 74%);
  animation: breath-pulse 21s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .plaque-glow::before { animation:none; opacity:.35; }
}

/* ===== SUN RADIANCE — the same breath, copied onto the sunburst glowing through the centre of
   the tree. Measured and verified the same way as the compass: sits at ~49.4% across / ~36.4%
   down the source artwork, giving an on-screen position of 40vh - 2.42vw, confirmed against an
   actual rendered crop before shipping. ===== */
.sun-glow {
  position:absolute; left:50%; top: calc(40vh - 2.42vw);
  width: clamp(110px,11vw,190px); height: clamp(110px,11vw,190px);
  transform: translate(-50%,-50%);
  z-index:2; pointer-events:none;
}
.sun-glow::before {
  content:""; position:absolute; inset:0; border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,250,.75) 0%, rgba(255,250,225,.36) 42%, rgba(255,250,225,0) 74%);
  animation: breath-pulse 21s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .sun-glow::before { animation:none; opacity:.35; }
}

/* ===== SIDE CRYSTALS — same breath again, on the two flanking gems either side of the arch.
   Measured and verified against a rendered crop: left crystal at 24.87% across / 42% down the
   source artwork, right crystal mirrored at 74.87% across, same height. Horizontally these need
   no vw/vh math — at cover-scale on a wide window there's no horizontal crop, so the source
   fraction maps straight onto the viewport as a plain percentage. Vertically both come out to
   40vh + 1.33vw. ===== */
.crystal-glow {
  position:absolute; top: calc(40vh + 1.33vw);
  width: clamp(60px,6vw,100px); height: clamp(60px,6vw,100px);
  transform: translate(-50%,-50%);
  z-index:2; pointer-events:none;
}
.crystal-glow.left  { left:24.87%; }
.crystal-glow.right { left:74.87%; }
.crystal-glow::before {
  content:""; position:absolute; inset:0; border-radius:50%;
  background: radial-gradient(circle, rgba(235,250,255,.75) 0%, rgba(210,240,250,.34) 42%, rgba(210,240,250,0) 74%);
  animation: breath-pulse 21s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .crystal-glow::before { animation:none; opacity:.35; }
}

/* ===== PILLAR CRYSTALS — same breath, on the two lotus-crowned finials atop the outer pillars.
   Measured and verified against a rendered crop: left at 8.92% across / 46.68% down the source
   artwork (40vh + 4.45vw on screen), right at 90.56% across / 46.48% down (40vh + 4.32vw). ===== */
.pillar-glow {
  position:absolute;
  width: clamp(46px,4.6vw,76px); height: clamp(46px,4.6vw,76px);
  transform: translate(-50%,-50%);
  z-index:2; pointer-events:none;
}
.pillar-glow.left  { left:8.92%;  top: calc(40vh + 4.45vw); }
.pillar-glow.right { left:90.56%; top: calc(40vh + 4.32vw); }
.pillar-glow::before {
  content:""; position:absolute; inset:0; border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,250,.75) 0%, rgba(255,248,225,.34) 42%, rgba(255,248,225,0) 74%);
  animation: breath-pulse 21s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .pillar-glow::before { animation:none; opacity:.35; }
}

.hero-enter {
  position:absolute; left:50%; bottom: clamp(32px,5vw,56px); transform:translate(calc(-50% - 8px), 0);
  z-index:3;
  display:inline-flex; flex-direction:column; align-items:center; gap:6px;
  text-decoration:none; color:var(--gold-deep); font-family:var(--sans); font-size:.78rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase;
}
.hero-enter svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.6; animation: enter-bob 2.2s ease-in-out infinite; }
.hero-enter:hover { color:#0C8CA8; }
@keyframes enter-bob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(6px); } }

/* ===== DEDICATION — sits directly beneath the Hero, above the Essence
   sentences, echoing the same treatment used on Freedom's Gate. ===== */
.hero-dedication {
  text-align: center;
  padding: clamp(30px,4.2vw,44px) clamp(24px,4vw,40px) 0;
  max-width: 680px; margin: 0 auto;
  font-family: var(--serif); font-style: italic; font-size: 1.08rem; line-height: 1.7;
  color: var(--text-dark);
}

/* ===== ESSENCE — both sentences, sitting quietly beneath the Hero ===== */
.essence { max-width:760px; margin:0 auto; padding: clamp(40px,5.5vw,64px) clamp(24px,4vw,64px) clamp(28px,3.6vw,36px); text-align:center; }
.essence p { font-family:var(--serif); font-style:italic; font-size:1.05rem; line-height:1.75; color:var(--text-dark); }
.essence p.path { margin-top:14px; font-family:var(--sans); font-style:normal; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--gold-deep); line-height:1.6; }

/* ===== ESSENCE EXPANDED — the longer Welcome intro (heart-hook + reference block).
   Modifier on the same .essence container: wider column, left-aligned body prose so
   longer paragraphs stay readable, with the opening hook and closing call kept
   centred/italic to match the original two-sentence treatment. Added 2 Sept 2026. ===== */
.essence.essence-expanded { max-width:820px; text-align:left; }
.essence.essence-expanded p.hook { font-style:italic; font-size:1.18rem; text-align:center; margin-bottom:22px; }
.essence.essence-expanded p.body { font-style:normal; margin-bottom:18px; }
.essence.essence-expanded p.body a { color:var(--gold-deep); text-decoration:underline; text-underline-offset:2px; }
.essence.essence-expanded p.body a:hover { color:var(--teal); }
.essence.essence-expanded p.lead-in { font-style:normal; font-weight:600; margin:26px 0 12px; color:var(--text-dark); }
.essence.essence-expanded ul.site-list {
  list-style:none; margin:0 0 24px; padding:0;
  columns:2; column-gap:28px;
}
.essence.essence-expanded ul.site-list li {
  font-family:var(--sans); font-style:normal; font-size:.9rem; line-height:1.6;
  color:var(--text-dark); position:relative; padding-left:16px; margin-bottom:6px; break-inside:avoid;
}
.essence.essence-expanded ul.site-list li::before {
  content:"\2726"; position:absolute; left:0; top:1px; color:var(--gold-deep); font-size:.68rem;
}
.essence.essence-expanded p.cta { font-style:italic; text-align:center; color:var(--gold-deep); margin-top:8px; }
@media (max-width:560px) {
  .essence.essence-expanded ul.site-list { columns:1; }
}

/* ===== BRIDGE HEADING + VISUAL — sits between the 2nd and 3rd paragraphs, right where
   the centred hook gives way to the left-justified body. Added 2 Sept 2026. ===== */
.essence.essence-expanded h2.bridge-heading {
  font-family:var(--serif); font-style:italic; font-weight:600; font-size:1.35rem;
  text-align:center; color:var(--gold-deep); margin:34px 0 18px;
}
.essence.essence-expanded figure.bridge-visual { margin:0 0 30px; text-align:center; }
.essence.essence-expanded figure.bridge-visual img {
  display:block; margin:0 auto;
  max-width:640px; width:88%; border-radius:6px;
  box-shadow:0 8px 28px rgba(22,72,82,.22);
}

/* ===== NEXT-LINK — a single quiet button carrying the seeker onward to the next
   landing page, sitting at the close of the block. ===== */
.essence.essence-expanded p.next-link { text-align:center; margin-top:28px; }
.essence.essence-expanded p.next-link a {
  display:inline-block; font-family:'Cinzel Decorative', var(--serif); font-size:.78rem;
  font-weight:400; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-dark); background:#fff;
  border:1.5px solid var(--gold-deep);
  box-shadow: inset 0 0 0 2px rgba(168,118,30,.18);
  border-radius:20px; padding:10px 26px; text-decoration:none;
  transition: background .2s, color .2s;
}
.essence.essence-expanded p.next-link a:hover { background:var(--gold-deep); color:#fff; }

/* ===== CLOSING BAND — Pantone 3115 C base (#23B9DA), with small orbs of light floating
   quietly up through it. ===== */
.closing-band {
  position:relative;
  overflow:hidden;
  background: linear-gradient(90deg, #163837 0%, #1E4E4C 50%, #163837 100%);
  color:#F3E9D2;
  text-align:center;
  padding: clamp(20px,2.6vw,26px) clamp(24px,4vw,64px);
  box-shadow: inset 0 1px 0 rgba(168,118,30,.35);
}
.closing-band::before {
  content:""; position:absolute; left:0; right:0; top:0; height:30px; transform:translateY(-100%);
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(168,118,30,.30));
  pointer-events:none;
}
/* ===== FLOATING ORBS — small points of light rising gently through the band, each on its own
   quiet rhythm rather than one mechanical loop. Gold, reads well against the deep emerald band. ===== */
.cb-orbs { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1; }
.cb-orb {
  position:absolute; bottom:4%;
  width: var(--s,5px); height: var(--s,5px);
  border-radius:50%;
  background: radial-gradient(circle, rgba(232,196,120,.95) 0%, rgba(232,196,120,.35) 55%, transparent 76%);
  box-shadow: 0 0 7px 2px rgba(232,196,120,.45);
  opacity:0;
  animation: orb-rise var(--d,9s) ease-in-out infinite;
  animation-delay: var(--delay,0s);
}
@keyframes orb-rise {
  0%   { opacity:0; transform:translateY(0) scale(.6); }
  14%  { opacity:.85; }
  60%  { opacity:.45; }
  100% { opacity:0; transform:translateY(-48px) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .cb-orb { animation:none; opacity:.3; }
}
.cb-links { position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:10px 12px; justify-content:center; margin-bottom:14px; }
/* Simple pill, framed in gold — a quiet nod to the Hero's gold framing rather than a copy of it.
   A slim gold border plus a fine inset line gives a "framed" feel without any of the Hero's
   scrollwork or ornament. */
.cb-btn {
  font-family:'Cinzel Decorative', var(--serif); font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:#12302E; background:#F3E9D2;
  border:1.5px solid var(--gold-deep);
  box-shadow: inset 0 0 0 2px rgba(168,118,30,.22);
  border-radius:20px; padding:8px 22px; text-decoration:none; transition: background .2s, color .2s;
}
.cb-btn:hover { background:var(--gold-deep); color:#12302E; }
.cb-copy { position:relative; z-index:2; font-family:var(--sans); font-weight:400; font-size:.64rem; letter-spacing:.06em; color:#F3E9D2; text-shadow: 0 1px 3px rgba(0,0,0,.25); }