/* home-hero.css — Home screen recomposition (airy dusk estate world + compass ring + circular orbs + centered model + living motion). Owner: Fable home agent. Loads LAST. */

/* ════════════════════════════════════════════════════════════════════
   THE WORLD — full-screen dark botanical night plate (the client's
   mansion dusk-dark at lower-left with warm lit windows, moonlit dark
   canopies overhead, a dark open glade centre-right for the ring).
   Matches the approved mockup: deep green-black, texture kept alive
   in the darks — never crushed.
   ════════════════════════════════════════════════════════════════════ */
#homeView.reference-home{
  --ring-size:min(57.4vh,42vw);         /* one square coordinate space for the compass ring */
  --orb-frac:.218;                      /* orb DIAMETER as a fraction of the ring space      */
  background:var(--e-ground)!important;
}
/* client's brand leaf-shadow texture (2026-07 feedback: no house, brighter) */
#homeView.reference-home::before{
  content:"";position:absolute;inset:0;z-index:-6;pointer-events:none;
  background:url("assets/brand/eden-leafshadow-plate-light.webp") center/cover no-repeat;
}
/* (leaf damask retired per client 2026-07-31 — clean split composition instead) */

/* ════════════════════════════════════════════════════════════════════
   THE HOUSE — the mansion is BAKED into the estate plate (left third,
   dusk-lit windows, seamless). The day image + night video stay in the
   DOM (daynight.js drives --dn off them and the orbs ride that cycle)
   but are visually retired.
   ════════════════════════════════════════════════════════════════════ */
/* the client's villa render + dusk film return as a LUMINOUS AMBIENT layer —
   full-bleed, dream-blurred, breathing through the leaf shadows so the home
   never reads flat. daynight.js still drives the day↔dusk crossfade. */
/* SPLIT COMPOSITION (client 2026-07-31): the villa render fully visible on
   the RIGHT, dissolving smoothly from mid-section toward the left where the
   button ring lives on the leaf-shadow green. */
.reference-home .home-house{
  position:absolute;inset:0;z-index:-5;overflow:hidden;
  opacity:1;visibility:visible;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg, transparent 30%, rgba(0,0,0,.45) 48%, #000 67%);
          mask-image:linear-gradient(90deg, transparent 30%, rgba(0,0,0,.45) 48%, #000 67%);
}
.reference-home .home-house .orbit-home-hero{
  position:absolute;inset:0;width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:72% 62%; /* favour the mansion */
  z-index:0;animation:none!important;
  /* FINAL COMP (client 2026-08-01): one unified dark moody scene — the villa
     sits dim-but-readable inside the deep green, windows carrying the warmth */
  filter:saturate(.94) brightness(1.03) contrast(.97)!important;
}
/* green at the seam + a dark green-graded sky so the villa dissolves into
   the same deep ground the ring lives on (matches the approved comp) */
.reference-home .home-house::after{
  content:"";position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(180deg, rgba(255,242,235,.45) 0%, rgba(255,242,235,.16) 30%, transparent 48%, rgba(228,201,176,.31) 100%),
    linear-gradient(90deg, rgba(255,242,235,.54) 32%, rgba(255,242,235,.38) 52%, rgba(255,242,235,.31) 72%, rgba(255,242,235,.31) 100%);
}
.reference-home .home-house video.orbit-home-night{
  z-index:1!important;opacity:0; /* inline opacity is JS-owned — never !important this */
  animation:none!important;
  filter:blur(9px) saturate(1.02) brightness(.94); /* the dusk film reads as dream, not footage — and never outshines the tint */
  transform:scale(1.05); /* hide blur edge bleed */
}
/* dusk balance layer — the brand leaf-shadow plate itself rises WITH the film
   (under a green wash), so the bright footage settles back into the same
   texture the left side lives on. The plate is full-bleed cover on both
   layers, so the leaf shadows align seamlessly across the masked seam. */
.reference-home .home-house::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(rgba(255,242,235,.34), rgba(255,242,235,.34)),
    url("assets/brand/eden-leafshadow-plate-light.webp") center/cover no-repeat;
  /* a base breath of the plate even by day (the comp's leaf shadows live on
     the villa too), rising as night falls — but never past a veil, so the
     villa stays readable at every point of the cycle */
  opacity:calc(.27 + var(--dn,0)*.25);transition:opacity 1.2s var(--ease);
}

/* the canopy layer becomes the HEARTH — a barely-perceptible warm breath
   over the mansion's lit windows (lower-left of the night plate), so the
   baked plate feels alive */
/* hearth glow retired with the house image — the plate is pure leaf shadow */
.reference-home .orbit-home-canopy{display:none!important}
.reference-home .orbit-home-canopy::after{display:none}
@keyframes hearthBreath{0%,100%{opacity:.34}50%{opacity:.56}}

/* grade → the mockup's canopy vignette: deep green-black washes that
   gently darken the corners (like overhanging leaves) + a whisper of
   help behind the left editorial. Values stay moderate — the plate is
   already dark and the darks must keep their texture. Deepens with --dn */
#homeView.reference-home .orbit-home-grade,
#homeView.reference-home.is-night .orbit-home-grade{
  z-index:-2!important;
  /* whisper of corner shade only — the bright leaf plate must stay bright */
  background:
    radial-gradient(120% 120% at 55% 46%, transparent 62%, rgba(228,201,176,.42) 100%)!important;
  opacity:.8;
  animation:none!important;
}
/* motes → faint gold pollen drifting in the night air */
.reference-home .orbit-home-motes{opacity:.3;filter:sepia(.4) saturate(1.15) blur(.4px)}

/* ════════════════════════════════════════════════════════════════════
   LIVING ATMOSPHERE — slow leaf-shadow drift + a few drifting leaves.
   Retuned for the night garden: faint moonlit dapple, deep-olive canopy
   shadows (multiply), everything a register quieter so it whispers.
   Paused off-home.
   ════════════════════════════════════════════════════════════════════ */
.home-leafshade{position:absolute;inset:-12%;z-index:-2;pointer-events:none;mix-blend-mode:multiply;filter:blur(26px)}
/* ls-a is the faint MOONLIT dapple drifting through the canopies */
.home-leafshade.ls-a{
  mix-blend-mode:normal;
  background:
    radial-gradient(22% 16% at 60% 8%, rgba(255,242,235,.30), transparent 70%),
    radial-gradient(16% 12% at 82% 26%, rgba(255,242,235,.24), transparent 70%),
    radial-gradient(18% 13% at 40% 20%, rgba(255,242,235,.21), transparent 70%);
  opacity:.65;animation:lsDriftA 75s ease-in-out infinite alternate;
}
/* ls-b is the deep-olive canopy shadow (multiply) — models depth in the
   night world without crushing the plate's dark texture */
.home-leafshade.ls-b{
  background:
    radial-gradient(30% 24% at 28% 94%, rgba(63,89,58,.14), transparent 70%),
    radial-gradient(20% 16% at 58% 2%, rgba(63,89,58,.12), transparent 68%),
    radial-gradient(24% 18% at 4% 58%, rgba(63,89,58,.13), transparent 70%);
  opacity:.5;animation:lsDriftB 96s ease-in-out infinite alternate;
}
@keyframes lsDriftA{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(2.4%,1.6%,0) scale(1.045)}}
@keyframes lsDriftB{0%{transform:translate3d(0,0,0) scale(1.035)}100%{transform:translate3d(-2.2%,-1.5%,0) scale(1)}}

.home-leaves{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.home-leaves .leaf{position:absolute;display:block;opacity:0;animation:leafDrift var(--ld,36s) linear var(--delay,0s) infinite}
.home-leaves .leaf svg{display:block;width:100%;height:100%;overflow:visible}
.home-leaves .leaf svg path{fill:var(--lc,var(--eden-olive))}
/* leaves ride soft — muted sand + dark olive, low opacity, so they read
   as night air, not ornament */
.leaf-1{left:82%;top:-3%;width:13px;height:13px;--lc:#6d603d;--lo:.26;--fx:-34vw;--fy:56vh;--ld:32s;--delay:0s}
.leaf-2{left:55%;top:-4%;width:10px;height:10px;--lc:#3f593a;--lo:.2;--fx:-20vw;--fy:72vh;--ld:40s;--delay:-14s;filter:blur(.8px)}
.leaf-3{left:96%;top:16%;width:9px;height:9px;--lc:#abbea2;--lo:.16;--fx:-30vw;--fy:52vh;--ld:44s;--delay:-27s;filter:blur(1.4px)}
.leaf-4{left:30%;top:-4%;width:12px;height:12px;--lc:#6d603d;--lo:.23;--fx:-15vw;--fy:76vh;--ld:36s;--delay:-8s}
.leaf-5{left:70%;top:-5%;width:8px;height:8px;--lc:#abbea2;--lo:.14;--fx:-26vw;--fy:64vh;--ld:45s;--delay:-36s;filter:blur(1.8px)}
@keyframes leafDrift{
  0%{transform:translate3d(0,0,0) rotate(0deg);opacity:0}
  8%{opacity:var(--lo,.3)}
  30%{transform:translate3d(calc(var(--fx)*.3 + 18px),calc(var(--fy)*.3),0) rotate(52deg)}
  52%{transform:translate3d(calc(var(--fx)*.52 - 14px),calc(var(--fy)*.52),0) rotate(-12deg)}
  76%{transform:translate3d(calc(var(--fx)*.76 + 12px),calc(var(--fy)*.76),0) rotate(38deg)}
  90%{opacity:var(--lo,.3)}
  100%{transform:translate3d(var(--fx),var(--fy),0) rotate(-6deg);opacity:0}
}

/* ════════════════════════════════════════════════════════════════════
   COMPASS RING — a square coordinate space centred at (63%, 49%);
   the five orbs sit ON a perfect circle (r = 40% of the space), the
   thin gold ring + chronometer dots are drawn by the SVG behind them.
   Test hook: .orbit-points circles = each button's right-centre.
   ════════════════════════════════════════════════════════════════════ */
/* no transform here: a transformed container would become a stacking context
   and trap the orbs' z-index below the model canvas */
.reference-home .curved-destinations{
  left:calc(31% - var(--ring-size)/2);top:calc(50% - var(--ring-size)/2);right:auto;bottom:auto; /* LEFT — the villa owns the right */
  width:var(--ring-size);height:var(--ring-size);
  z-index:auto;
}
.reference-home .destination-orbit{opacity:1!important;z-index:3!important;overflow:visible}
.reference-home .destination-orbit path{display:none}
/* on the dark ground the hairline needs no dark under-shadow — a faint
   gold breath instead, so the ring reads as drawn light */
.reference-home .ring-line{
  fill:none;stroke:rgba(109,96,61,.6);stroke-width:1;vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 5px rgba(63,89,58,.20));
}
.reference-home .ring-dots circle{fill:rgba(109,96,61,.78);stroke:none;filter:drop-shadow(0 0 4px rgba(63,89,58,.22))}
.reference-home .ring-dots circle:nth-child(n+6){fill:rgba(109,96,61,.42)}
.reference-home .ring-dots{transform-box:view-box;transform-origin:center;animation:ringTurn 240s linear infinite}
@keyframes ringTurn{to{transform:rotate(360deg)}}
/* the 5 alignment nodes read as tiny gold jewels on each orb's rim */
.reference-home .orbit-points circle{
  fill:rgba(109,96,61,.82)!important;stroke:rgba(63,89,58,.4)!important;stroke-width:1!important;
  filter:drop-shadow(0 0 3px rgba(63,89,58,.25))!important;animation:none!important;
}

/* ── CIRCULAR ORBS ── the five destinations are perfect circles whose
   CENTRES sit ON the r=40% circle at −90/−8/62/118/188°. Geometry is
   pure ring-fraction so the orbit-points alignment holds on every
   viewport. curve-x = centre + orb-radius (right edge); orb radius =
   9.9% of the ring. The orb MATERIAL (lit 4-stop --dn gradient, matte
   grain, gold rings) lives in finish-kit.css — only sizing + placement
   live here. */
.reference-home .destination{
  --orb:calc(var(--ring-size)*var(--orb-frac))!important;z-index:5;
}
.reference-home .destination-estate{--curve-x:60.9%!important;--curve-y:10%!important}
.reference-home .destination-plan{--curve-x:21.289%!important;--curve-y:44.433%!important}
.reference-home .destination-mansions{--curve-x:100.511%!important;--curve-y:44.433%!important}
.reference-home .destination-life{--curve-x:79.679%!important;--curve-y:85.318%!important}
.reference-home .destination-inside{--curve-x:42.121%!important;--curve-y:85.318%!important}

/* whisper halo — a second 1px gold ring floated ~6px OUTSIDE the orb's
   gold rim with a clear gap: barely-there jewellery. Drawn by a dedicated
   .destination-halo overlay span (absolute, pointer-events:none — never
   affects geometry, so the alignment contract holds). A soft glint
   travels the circumference once every ~9s: the ring is a conic gradient
   masked to a 1px band, and rotating the span carries the glint around.
   Delays are staggered so the five rings breathe out of step. */
.reference-home .destination-halo{
  position:absolute;inset:-7px;border-radius:50%;pointer-events:none;z-index:0;
  background:conic-gradient(from -90deg,
    rgba(109,96,61,.34) 0deg 288deg,
    rgba(109,96,61,.58)  312deg,
    rgba(109,96,61,.92) 324deg,
    rgba(109,96,61,.58)  336deg,
    rgba(109,96,61,.34) 356deg 360deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 1.5px),#000 calc(100% - .6px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 1.5px),#000 calc(100% - .6px));
  animation:haloGlint 9s linear infinite;
}
@keyframes haloGlint{to{transform:rotate(360deg)}}
.reference-home .destination-plan .destination-halo{animation-delay:-3.4s}
.reference-home .destination-mansions .destination-halo{animation-delay:-6.1s}
.reference-home .destination-life .destination-halo{animation-delay:-1.7s}
.reference-home .destination-inside .destination-halo{animation-delay:-7.6s}

/* inner content: quieter type/icon inside the bigger circles; FULL WHITE by day
   for readability (night keeps deep ink — white would vanish on the ivory faces) */
.reference-home .destination-core b{font-size:clamp(9px,.8vw,12.5px);letter-spacing:.17em;color:var(--e-ink-strong)!important;text-shadow:0 1px 6px rgba(255,242,235,.8)!important}
.reference-home .destination-icon{transform:scale(.64);color:var(--e-ink-strong)!important}
.reference-home.is-night .destination-core b{color:var(--e-ink)!important;text-shadow:none!important}
.reference-home.is-night .destination-icon{color:var(--e-ink-strong)!important}

/* ════════════════════════════════════════════════════════════════════
   THE MODEL — the luminous golden maquette floats at the heart of the
   ring over a dark warm glade, blooming softly like the mockup's
   glowing masterplan. Canvas bloom lives HERE (CSS only — JS untouched).
   ════════════════════════════════════════════════════════════════════ */
.reference-home .hmf-model canvas{filter:
  drop-shadow(0 26px 46px rgba(63,89,58,.19))
  drop-shadow(0 0 24px rgba(228,201,176,.5))
  drop-shadow(0 0 68px rgba(228,201,176,.3))!important}
.reference-home .home-masterplan-float{
  position:absolute;inset:0;left:0!important;right:0;top:0;bottom:0!important;
  width:auto!important;height:auto;transform:none!important;
  pointer-events:none!important;z-index:auto;cursor:default;
}
.reference-home .home-masterplan-float:hover{transform:none!important}
/* sized so the model's WIDEST rotation extent (ground diagonal broadside
   ≈ .90 × stage) stays clear of every orb's inner edge (ring r 40% − orb r 9.9%) */
.reference-home .hmf-stage{
  position:absolute;left:31%;top:50%;
  width:calc(var(--ring-size)*.62);height:calc(var(--ring-size)*.62);
  translate:-50% -50%;z-index:4;pointer-events:auto;
  animation:hmfFloat 9s ease-in-out infinite;
}
/* dark warm glade disc inside the ring — a pool of amber-tinted night
   the luminous maquette floats over, like the mockup's glowing centre */
.reference-home .hmf-stage::before{
  content:"";position:absolute;inset:4%!important;left:4%;right:4%;top:4%;bottom:4%;
  border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle at 50% 56%, rgba(228,201,176,.6), rgba(228,201,176,.3) 46%, transparent 72%)!important;
  filter:blur(16px)!important;
}
.reference-home .hmf-model{
  position:absolute;inset:0;width:100%!important;height:100%!important;
  aspect-ratio:auto;transform:none;z-index:1;
}

/* ════════════════════════════════════════════════════════════════════
   MASTER PLAN affordance — DECLUTTERED (client): the pointer label, its
   dotted leader and pulse dot are gone; the luminous maquette is its own
   invitation. The button survives with zero visual footprint because it is
   the click target home-model.js forwards single taps to (.hmf-open) and
   the keyboard / screen-reader route into the masterplan.
   Highest specificity + !important so it stays hidden regardless of which
   later sheet still carries a legacy .hmf-tag position.
   ════════════════════════════════════════════════════════════════════ */
#homeView .hmf-tag.hmf-open{
  position:absolute!important;left:0!important;top:0!important;
  right:auto!important;bottom:auto!important;
  width:1px!important;height:1px!important;
  margin:0!important;padding:0!important;border:0!important;
  overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;
  background:none!important;box-shadow:none!important;
  transform:none!important;animation:none!important;
  pointer-events:none!important;
}

.reference-home .home-signature{z-index:6}

/* ════════════════════════════════════════════════════════════════════
   ENTRANCE — one breath: world in → hearth melts in → ring draws → orbs
   land → model glow last. ~2.1s, expo easing. (The editorial and pointer
   label were removed in the declutter, so their beats are gone with them.)
   ════════════════════════════════════════════════════════════════════ */
.reference-home.home-motion::before{animation:edenWorldIn 1s var(--ease) both}
@keyframes edenWorldIn{0%{opacity:0;transform:scale(1.03)}100%{opacity:1;transform:none}}
.reference-home.home-motion .orbit-home-canopy{animation:hearthIn 1.4s .3s var(--ease) both,hearthBreath 11s 1.7s ease-in-out infinite!important}
@keyframes hearthIn{0%{opacity:0}100%{opacity:.34}}
.reference-home.home-motion .home-masterplan-float{animation:none!important}
.reference-home.home-motion .ring-line{stroke-dasharray:100;stroke-dashoffset:100;animation:ringDraw 1.5s .7s var(--ease) forwards}
@keyframes ringDraw{to{stroke-dashoffset:0}}
.reference-home.home-motion .ring-dots{animation:ringTurn 240s linear infinite,homeFade .8s 1.15s var(--ease) both}
.reference-home.home-motion .orbit-points{animation:homeFade .5s 1.35s both}
.reference-home.home-motion .destination-estate{animation-delay:.85s}
.reference-home.home-motion .destination-plan{animation-delay:.97s}
.reference-home.home-motion .destination-mansions{animation-delay:1.09s}
.reference-home.home-motion .destination-life{animation-delay:1.21s}
.reference-home.home-motion .destination-inside{animation-delay:1.33s}
.reference-home.home-motion .hmf-stage{
  animation:hmfFloat 9s 2.1s ease-in-out infinite,modelIn 1s 1.1s var(--ease) both;
}
@keyframes modelIn{0%{opacity:0;filter:blur(6px)}100%{opacity:1;filter:blur(0)}}
.reference-home.home-motion .home-leaves{animation:homeFade 1.4s 1.4s both}
.reference-home.home-motion .home-signature{animation:homeRise .8s 1.45s var(--ease) both}

/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE — portrait keeps the same ring geometry (test-safe: the
   container moves, buttons + svg move together).
   ════════════════════════════════════════════════════════════════════ */
/* short landscape (Tab S7 800px) */
@media (max-height:850px) and (orientation:landscape){
  /* the 0.7× ring leaves ~91px orbs at 800h — the caps labels ease a
     register so MANSIONS sits clear of the rim */
  .reference-home .destination-core b{font-size:10px;letter-spacing:.1em}
}

@media (orientation:portrait){
  #homeView.reference-home{--ring-size:min(56vh,88vw)}
  .reference-home .curved-destinations{left:calc(50% - var(--ring-size)/2);top:calc(60% - var(--ring-size)/2)}
  .reference-home .hmf-stage{left:50%;top:60%}
  .reference-home .home-house{left:-14%;bottom:-4%;width:86%;height:46%}
  .reference-home .destination{--orb:calc(var(--ring-size)*var(--orb-frac))!important}
}

@media (prefers-reduced-motion:reduce){
  .home-leafshade,.home-leaves .leaf,
  .reference-home .ring-dots,
  .reference-home .hmf-stage,
  .reference-home .orbit-home-canopy{animation:none!important}
  .home-leaves .leaf{opacity:var(--lo,.3)}
  .reference-home .orbit-home-canopy{opacity:.4!important}
  /* the halo rests as a plain 1px ring — no travelling glint */
  .reference-home .destination-halo{animation:none!important;background:rgba(109,96,61,.34)}
}

/* corner chrome — the mockup's bare lockup reads cleanly on the dark
   canopy: no glass chip, no border, just the type with a night shadow */
.reference-home .home-corner-brand,
.reference-home .home-corner-save{
  background:transparent;
  backdrop-filter:none;
  border:none;
  border-radius:0;
  padding:0 4px;
  text-shadow:0 1px 10px rgba(255,242,235,.85);
}
.reference-home .home-corner-brand{height:46px}
.reference-home .home-corner-save{height:46px}

/* ═══════════ SKEUOMORPHIC orbs — real, raised, lacquered buttons ═══════════
   A physical convex button: glossy top catch-light, deep body gradient riding the
   --dn cycle (lacquered garden-green enamel by day → polished ivory horn by night),
   machined bevel edges, a hard contact edge and layered elevation shadows — the
   button visibly SITS ABOVE the scene. Pressing it physically depresses.        */
.reference-home .destination-core,
.reference-home.is-night .destination-core{
  background:
    /* convex gloss — the ceiling light caught on the lacquer dome */
    radial-gradient(ellipse 68% 42% at 50% 14%,
      rgba(255,255,255,.52), rgba(255,255,255,.1) 58%, transparent 74%),
    /* floor bounce at the base of the dome */
    radial-gradient(ellipse 70% 30% at 50% 108%,
      color-mix(in srgb, rgba(171,190,162,.3), rgba(255,242,235,.34) calc(var(--dn,0)*100%)), transparent 68%),
    /* the body — light lacquer: sage by day, beige by night */
    linear-gradient(180deg,
      color-mix(in srgb, #f0f7e8, #fff2eb calc(var(--dn,0)*100%)) 0%,
      color-mix(in srgb, #d8ecd4, #fee6d3 calc(var(--dn,0)*100%)) 52%,
      color-mix(in srgb, #abbea2, #e4c9b0 calc(var(--dn,0)*100%)) 100%)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  border:1px solid color-mix(in srgb, rgba(63,89,58,.30), rgba(109,96,61,.30) calc(var(--dn,0)*100%))!important;
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.55),      /* machined top bevel   */
    inset 0 -2px 3px rgba(63,89,58,.13),        /* under-bevel          */
    inset 0 -16px 26px rgba(63,89,58,.10),      /* body occlusion       */
    0 2px 0 rgba(63,89,58,.10),                 /* hard contact edge    */
    0 14px 24px rgba(63,89,58,.16),             /* near elevation       */
    0 34px 60px rgba(63,89,58,.13)!important;   /* far elevation        */
  transition:box-shadow .18s var(--ease)!important;
}
/* lacquer keeps a whisper of grain */
.reference-home .destination-core::after{opacity:.16}
/* the press: the button physically depresses */
.reference-home .destination:active .destination-core{
  box-shadow:
    inset 0 3px 8px rgba(63,89,58,.14),
    inset 0 1px 2px rgba(63,89,58,.16),
    inset 0 -10px 20px rgba(63,89,58,.10),
    0 1px 0 rgba(63,89,58,.10),
    0 6px 12px rgba(63,89,58,.14)!important;
}

/* ═══════════ real Embassy logo in the signature ═══════════ */
.home-signature .signature-logo{display:block;width:clamp(120px,10.5vw,158px);height:auto;margin:0 auto 12px;opacity:.94;filter:drop-shadow(0 2px 8px rgba(63,89,58,.16))}
.home-signature>b{font-size:15px;letter-spacing:.5em;text-indent:.5em}

/* ONE ring only: the thin glinting halo is the sole ring around the glass —
   the bronze rim + its dark under-ring + the inner ring are retired */
.reference-home .destination:before,
.reference-home.is-night .destination:before{border-color:transparent!important;box-shadow:none!important}
.reference-home .destination:after,
.reference-home.is-night .destination:after{border-color:transparent!important;box-shadow:none!important}
/* halo hugs the orb a touch closer now that it's alone */
.reference-home .destination-halo{inset:-4px}

/* ═══════════ 40% colour fill inside the outer ring — a soft aura disc that
   rides the day↔night cycle (green by day, warm beige by night) ═══════════ */
.reference-home .destination:before,
.reference-home.is-night .destination:before{
  inset:-4px!important;border-radius:50%!important;
  border:0!important;box-shadow:none!important;
  background:color-mix(in srgb,
    rgba(171,190,162,.4),
    rgba(228,201,176,.4) calc(var(--dn,0)*100%))!important;
}

/* ═══════════ futuristic flow — faint energy lines running button → model ═══════════ */
.reference-home .flow-lines path{
  fill:none;stroke:rgba(109,96,61,.34);stroke-width:1;
  stroke-dasharray:3 11;
  animation:flowPulse 4.2s linear infinite;
}
.reference-home .flow-lines path:nth-child(2){animation-delay:-.8s}
.reference-home .flow-lines path:nth-child(3){animation-delay:-1.7s}
.reference-home .flow-lines path:nth-child(4){animation-delay:-2.5s}
.reference-home .flow-lines path:nth-child(5){animation-delay:-3.4s}
@keyframes flowPulse{to{stroke-dashoffset:-56}}
/* lines arrive with the ring during the entrance */
.reference-home.home-motion .flow-lines{animation:homeFade .6s 1.5s both}
@media (prefers-reduced-motion:reduce){.reference-home .flow-lines path{animation:none;stroke-dasharray:none;opacity:.18}}

/* ═══════════ label OUTSIDE the circle — icon alone at the centre ═══════════
   Each orb face carries only its icon (+ the small rule). The label floats
   outside the circle, aligned to its ring position, with a hairline tick
   subtly pointing back at its button. The label is still a child of the
   button (absolute, out of flow) so taps on it press the button and the
   ring-alignment geometry is untouched. */
.reference-home .destination-core{overflow:visible!important}
.reference-home .destination-core b,
.reference-home.is-night .destination-core b{
  position:absolute;margin:0;white-space:nowrap;
  color:var(--e-ink-strong)!important;text-shadow:0 1px 10px rgba(255,242,235,.85)!important;
  font-size:clamp(10px,.86vw,13px);letter-spacing:.22em;
}
/* pointer tick — a 1px hairline between label and orb */
.reference-home .destination-core b::before{
  content:"";position:absolute;background:rgba(109,96,61,.5);
}
/* THE ESTATE — top of the ring → label above, tick pointing down */
.reference-home .destination-estate .destination-core b{bottom:calc(100% + 26px);left:50%;transform:translateX(-50%);text-align:center}
.reference-home .destination-estate .destination-core b::before{top:calc(100% + 5px);left:50%;width:1px;height:13px}
/* THE MANSIONS — right → label to the right, tick pointing left */
.reference-home .destination-mansions .destination-core b{left:calc(100% + 26px);top:50%;transform:translateY(-50%);text-align:left}
.reference-home .destination-mansions .destination-core b::before{right:calc(100% + 6px);top:50%;height:1px;width:13px}
/* LIFE AT EDEN — bottom-right → label below, tick pointing up */
.reference-home .destination-life .destination-core b{top:calc(100% + 26px);left:50%;transform:translateX(-50%);text-align:center}
.reference-home .destination-life .destination-core b::before{bottom:calc(100% + 5px);left:50%;width:1px;height:13px}
/* INSIDE EDEN — bottom-left → label below, tick pointing up */
.reference-home .destination-inside .destination-core b{top:calc(100% + 26px);left:50%;transform:translateX(-50%);text-align:center}
.reference-home .destination-inside .destination-core b::before{bottom:calc(100% + 5px);left:50%;width:1px;height:13px}
/* COMPARE PLANS — left → label to the left, tick pointing right */
.reference-home .destination-plan .destination-core b{right:calc(100% + 26px);top:50%;transform:translateY(-50%);text-align:right}
.reference-home .destination-plan .destination-core b::before{left:calc(100% + 6px);top:50%;height:1px;width:13px}
/* the freed face: icon reads larger again at the centre, rule sits beneath it */
.reference-home .destination-icon{transform:scale(.86)!important}
.reference-home .destination-core>i{margin-top:12px}

/* ═══════════ energy streams — buttons → the heart of the master plan, 20% ═══════════ */
.reference-home .flow-lines{opacity:.2}
.reference-home .flow-lines path{
  stroke:var(--eden-olive);stroke-width:1.4;
  stroke-dasharray:5 13;
  animation:flowPulse 3.6s linear infinite;
}

/* entrance fade must LAND at the 20% resting transparency (homeFade pinned it at 1) */
.reference-home.home-motion .flow-lines{animation:flowsIn .8s 1.5s both}
@keyframes flowsIn{from{opacity:0}to{opacity:.2}}

/* ═══════════ readable labels + REAL energy pulses ═══════════ */
/* labels: a full register bigger, still elegant */
.reference-home .destination-core b,
.reference-home.is-night .destination-core b{
  font-size:clamp(13px,1.15vw,17px)!important;letter-spacing:.24em!important;
}

/* energy: a faint rail + a bright comet PULSE travelling button → plan.
   The comet is a short bright dash (14 units) with a long gap (197), so one
   charge of energy runs the line, glowing, then the next follows. Group
   rests at the approved 20% transparency. */
.reference-home .flow-lines path{animation:none;stroke-dasharray:none}
.reference-home .flow-rail{
  fill:none;stroke:rgba(109,96,61,.3);stroke-width:1;
}
.reference-home .flow-lines path.flow-pulse{
  fill:none;stroke:var(--eden-olive);stroke-width:2.6;stroke-linecap:round;
  stroke-dasharray:14 197; /* one comet per cycle */
  animation:energyRun 2.6s linear infinite;
}
.reference-home .flow-lines path.flow-pulse:nth-of-type(7){animation-delay:-.5s}
.reference-home .flow-lines path.flow-pulse:nth-of-type(8){animation-delay:-1.1s}
.reference-home .flow-lines path.flow-pulse:nth-of-type(9){animation-delay:-1.6s}
.reference-home .flow-lines path.flow-pulse:nth-of-type(10){animation-delay:-2.1s}
@keyframes energyRun{from{stroke-dashoffset:211}to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.reference-home .flow-pulse{animation:none;opacity:0}.reference-home .flow-rail{opacity:.6}}

/* ═══════════ SEVEN-BUTTON RING — evenly spaced (51.4° apart), no drawn circle ═══════════ */
.reference-home .ring-line,.reference-home .ring-dots{display:none!important}
/* recomputed centers on the r=40% circle; curve-x = center + orb radius (10.9%) */
.reference-home .destination-estate{--curve-x:60.9%!important;--curve-y:10%!important}
.reference-home .destination-mansions{--curve-x:92.17%!important;--curve-y:25.06%!important}
.reference-home .destination-life{--curve-x:99.9%!important;--curve-y:58.9%!important}
.reference-home .destination-inside{--curve-x:78.26%!important;--curve-y:86.04%!important}
.reference-home .destination-plan{--curve-x:43.54%!important;--curve-y:86.04%!important}
.reference-home .destination-about{--curve-x:21.9%!important;--curve-y:58.9%!important}
.reference-home .destination-location{--curve-x:29.63%!important;--curve-y:25.06%!important}
/* label sides follow the new clock positions */
.reference-home .destination-mansions .destination-core b{left:calc(100% + 22px);top:38%;transform:translateY(-50%);text-align:left;right:auto;bottom:auto}
.reference-home .destination-mansions .destination-core b::before{right:calc(100% + 6px);top:50%;height:1px;width:13px;left:auto}
.reference-home .destination-life .destination-core b{left:calc(100% + 22px);top:50%;transform:translateY(-50%);text-align:left;right:auto;bottom:auto}
.reference-home .destination-life .destination-core b::before{right:calc(100% + 6px);top:50%;height:1px;width:13px;left:auto;bottom:auto}
.reference-home .destination-plan .destination-core b{top:calc(100% + 24px);left:50%;transform:translateX(-50%);text-align:center;right:auto;bottom:auto}
.reference-home .destination-plan .destination-core b::before{bottom:calc(100% + 5px);left:50%;width:1px;height:13px;right:auto;top:auto}
.reference-home .destination-about .destination-core b{right:calc(100% + 22px);top:50%;transform:translateY(-50%);text-align:right;left:auto;bottom:auto}
.reference-home .destination-about .destination-core b::before{left:calc(100% + 6px);top:50%;height:1px;width:13px;right:auto;bottom:auto}
/* label LEFT of the orb (client 2026-08-03) — mirrors the About placement */
.reference-home .destination-location .destination-core b{right:calc(100% + 22px);top:50%;transform:translateY(-50%);text-align:right;left:auto;bottom:auto;white-space:nowrap}
.reference-home .destination-location .destination-core b::before{left:calc(100% + 6px);top:50%;height:1px;width:13px;right:auto;bottom:auto;transform:none}
/* new icons: inline svg sizing */
.reference-home .destination-icon svg{display:block;width:24px;height:26px}
/* halo glint + entrance stagger for the two new orbs */
.reference-home .destination-about .destination-halo{animation-delay:-4.7s}
.reference-home .destination-location .destination-halo{animation-delay:-8.4s}
.reference-home.home-motion .destination-about{animation-delay:1.62s}
.reference-home.home-motion .destination-location{animation-delay:1.7s}
/* energy pulse stagger for the two new lines (paths 13-14 of 14) */
.reference-home .flow-lines path.flow-pulse:nth-of-type(13){animation-delay:-.8s}
.reference-home .flow-lines path.flow-pulse:nth-of-type(14){animation-delay:-1.9s}

/* ═══════════ button labels in SANS (client 2026-07-31: readability) ═══════════
   The floating orb labels switch from IvyOra to Acumin Pro — small caps at
   wide tracking need the sans to stay crisp over the busy plate. Serif stays
   everywhere else on the screen (signature, headings). */
.reference-home .destination-core b,
.reference-home.is-night .destination-core b{
  font-family:var(--sans)!important;
  font-weight:400;
  font-size:clamp(12px,1.02vw,15px)!important;letter-spacing:.22em!important;
}

/* ═══════════════════════════════════════════════════════════════════════
   FINAL HOME COMP LOCK (client 2026-08-01: "i want the home screen to be
   like this. this is final") — the approved comp is ONE unified dark
   moody green scene: green lacquer orbs at all hours, cream/gold line
   icons, the tagline over the villa, a luminous white-cream maquette,
   gold leaf line-art breathing at the edges.
   ═══════════════════════════════════════════════════════════════════════ */

/* 1 · ORBS STAY GREEN — the ivory night flip is retired; the lacquer is
   the comp's rich garden-green at every point of the cycle. Night still
   reads because the WORLD deepens around them. */
.reference-home .destination-core,
.reference-home.is-night .destination-core{
  background:
    radial-gradient(ellipse 68% 42% at 50% 14%,
      rgba(255,255,255,.44), rgba(255,255,255,.08) 58%, transparent 74%),
    radial-gradient(ellipse 70% 30% at 50% 108%, rgba(171,190,162,.35), transparent 68%),
    linear-gradient(180deg, #fff2eb 0%, #fee6d3 52%, #e4c9b0 100%)!important;
  border:1px solid var(--e-line-strong)!important;
}
/* icons + underline dash: pale cream-gold line work, both day and night */
.reference-home .destination-icon,
.reference-home.is-night .destination-icon{color:var(--e-ink-strong)!important}
.reference-home .destination-core>i,
.reference-home.is-night .destination-core>i{background:rgba(63,89,58,.55)!important}
/* aura disc behind the orb: static soft green (no beige night mix) */
.reference-home .destination:before,
.reference-home.is-night .destination:before{
  background:rgba(171,190,162,.45)!important;
}

/* 2 · TAGLINE — "A LIFE SURROUNDED BY NATURE, / CRAFTED FOR GENERATIONS."
   bottom-right over the villa, hairline rule at left; line 1 cream,
   line 2 bronze-gold (exactly the comp). */
.reference-home .home-tagline{
  position:absolute;left:56.5%;top:60.5%;z-index:3;pointer-events:none;
  padding-left:30px;border-left:1px solid rgba(109,96,61,.5);
  font-family:var(--sans);font-weight:400;text-transform:uppercase;
  font-size:clamp(15px,1.38vw,21px);letter-spacing:.3em;line-height:2;
  color:var(--e-ink-strong);text-shadow:0 2px 16px rgba(255,242,235,.85);
}
.reference-home .home-tagline em{font-style:normal;color:var(--eden-olive)}
.reference-home.home-motion .home-tagline{animation:homeRise .9s 1.55s var(--ease) both}
@media (orientation:portrait){.reference-home .home-tagline{display:none}}

/* 3 · THE MAQUETTE — lifted toward the comp's white-cream lit model */
.reference-home .hmf-model canvas{filter:
  brightness(.88) saturate(.9) contrast(1.06)
  drop-shadow(0 26px 46px rgba(63,89,58,.19))
  drop-shadow(0 0 24px rgba(228,201,176,.55))
  drop-shadow(0 0 68px rgba(63,89,58,.12))!important}

/* 4 · GOLD LEAF LINE-ART at the edges — the brand plate lifted golden
   through a screen blend, masked away from the centre so it frames the
   scene exactly like the comp's drawn leaves. */
#homeView.reference-home::after{
  content:"";position:absolute;inset:0;z-index:-4;pointer-events:none;
  background:url("assets/brand/eden-leafshadow-plate-light.webp") center/cover no-repeat;
  mix-blend-mode:multiply;opacity:.22;
  filter:sepia(.5) brightness(1.02) saturate(1.15);
  -webkit-mask:radial-gradient(80% 76% at 50% 46%, transparent 52%, #000 94%);
          mask:radial-gradient(80% 76% at 50% 46%, transparent 52%, #000 94%);
}