/* ================================================================
   GREEN VIEW LUXURY APARTMENTS — Sened Real Estate
   Design system: extends the Grand Residence visual language
   (Fraunces + Manrope, gold accent, glass panels, scroll-reveal)
   re-based on a forest-green palette with a fresh leaf accent,
   built for the Green View brief: sustainable architecture,
   planted balconies, rooftop garden, park-facing site.
   ================================================================ */

:root{
  --forest-900:#050B07;
  --forest-800:#08160E;
  --forest-700:#0C2417;
  --forest-600:#123420;
  --forest-500:#1B4A2C;
  --forest-100:#E7ECE2;
  --gold:#C9A227;
  --gold-light:#E8C468;
  --gold-dark:#9C7A1A;
  --leaf:#7FBF5A;
  --leaf-light:#A7DB86;
  --ivory:#F3EFE4;
}

#green-view, #green-view *{box-sizing:border-box;}
#green-view{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  #green-view{scroll-behavior:auto;}
  #green-view *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}

#green-view{
  position:relative;width:100%;min-width:0;margin:0;padding:0;
  background:var(--forest-700);color:var(--ivory);
  font-family:'Manrope',sans-serif;overflow-x:clip;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
#green-view h1,#green-view h2,#green-view h3,#green-view h4,#green-view p{margin-top:0;}
#green-view a{text-decoration:none;color:inherit;}
#green-view button,#green-view input,#green-view select,#green-view textarea{font:inherit;color:inherit;}
#green-view img{vertical-align:middle;}
#green-view h1,#green-view h2,#green-view h3,#green-view h4,#green-view .font-display{font-family:'Fraunces',serif;}
#green-view .amh{font-family:'Noto Sans Ethiopic','Manrope',sans-serif;}

/* fine grain texture for a premium, non-flat feel */
#green-view .grain{
  position:fixed; inset:0; z-index:60; pointer-events:none;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 3D canvas stage ---------- */
#green-view #stage{position:fixed; inset:0; z-index:0; transition:opacity 1.1s ease;}
#green-view #stage canvas{display:block; width:100%; height:100%;}
#green-view .stage-vignette{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse at 50% 30%, rgba(12,36,23,0) 0%, rgba(8,22,14,.55) 62%, rgba(5,11,7,.96) 100%);
}
#green-view #loader{
  position:fixed; inset:0; z-index:59; display:flex; align-items:center; justify-content:center;
  background:var(--forest-900); transition:opacity .6s ease, visibility .6s ease;
}
#green-view #loader.done{opacity:0; visibility:hidden; pointer-events:none;}
#green-view #loader .mark{width:46px;height:46px;opacity:.9;animation:gv-pulse 1.6s ease-in-out infinite;}
@keyframes gv-pulse{0%,100%{opacity:.35;transform:scale(.94);}50%{opacity:1;transform:scale(1);}}

#green-view main{position:relative; z-index:2;}

/* ---------- glass panels ---------- */
#green-view .glass{
  background:linear-gradient(155deg, rgba(27,74,44,.55), rgba(8,22,14,.74));
  border:1px solid rgba(201,162,39,.16);
  backdrop-filter:blur(18px) saturate(130%);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.04);
}
#green-view .rule-gold{background:linear-gradient(90deg, var(--gold) 0%, rgba(201,162,39,0) 100%); height:1px;}
#green-view .reveal{opacity:0; transform:translateY(28px); transition:opacity .9s cubic-bezier(.16,.8,.24,1), transform .9s cubic-bezier(.16,.8,.24,1);}
#green-view .reveal.in{opacity:1; transform:translateY(0);}
#green-view .reveal-d1{transition-delay:.08s;} #green-view .reveal-d2{transition-delay:.16s;} #green-view .reveal-d3{transition-delay:.24s;} #green-view .reveal-d4{transition-delay:.32s;}
#green-view .section{position:relative; z-index:2;}
#green-view .step-num{font-family:'Fraunces',serif; font-weight:400; font-size:2.1rem; color:var(--gold); line-height:1;}

#green-view ::selection{background:rgba(127,191,90,.35); color:#fff;}
#green-view{scrollbar-width:thin; scrollbar-color:var(--gold) var(--forest-700);}
#green-view ::-webkit-scrollbar{width:9px;}
#green-view ::-webkit-scrollbar-track{background:var(--forest-700);}
#green-view ::-webkit-scrollbar-thumb{background:linear-gradient(var(--gold-dark),var(--gold));border-radius:8px;}

/* ---------- nav ---------- */
#green-view #nav{position:fixed; top:0; left:0; right:0; z-index:50; transition:background .5s ease, border-color .5s ease, padding .4s ease;}
#green-view #nav.scrolled{background:rgba(8,22,14,.75); backdrop-filter:blur(14px); border-bottom:1px solid rgba(201,162,39,.14);}

#green-view .btn-gold{background:linear-gradient(180deg, var(--gold-light), var(--gold)); color:#16210c; font-weight:700; box-shadow:0 10px 30px -10px rgba(201,162,39,.55);}
#green-view .btn-gold:hover{filter:brightness(1.07);}
#green-view .btn-leaf{background:linear-gradient(180deg, var(--leaf-light), var(--leaf)); color:#10240a; font-weight:700; box-shadow:0 10px 30px -10px rgba(127,191,90,.5);}
#green-view .btn-leaf:hover{filter:brightness(1.06);}
#green-view .btn-outline{border:1px solid rgba(243,239,228,.35); color:var(--ivory);}
#green-view .btn-outline:hover{border-color:var(--gold); color:var(--gold-light);}
#green-view a:focus-visible, #green-view button:focus-visible, #green-view input:focus-visible, #green-view select:focus-visible{outline:2px solid var(--gold-light); outline-offset:3px;}

/* ---------- image system ---------- */
#green-view img{max-width:100%; height:auto; -webkit-backface-visibility:hidden; backface-visibility:hidden; -webkit-user-drag:none;}
#green-view .photo-bleed{position:relative; overflow:hidden;}
#green-view .photo-bleed img{width:100%; height:100%; object-fit:cover; object-position:center; display:block;}
#green-view .fade-in-img{opacity:0; transform:scale(1.02); transition:opacity 1.1s ease, transform 1.6s cubic-bezier(.16,.8,.24,1);}
#green-view .fade-in-img.in{opacity:1; transform:scale(1);}

/* full-bleed tower "moment" */
#green-view .tower-moment{
  min-height:clamp(680px,88vh,980px); min-height:clamp(680px,88svh,980px);
  background:radial-gradient(circle at 74% 40%, rgba(127,191,90,.10), transparent 36%), linear-gradient(180deg, rgba(5,11,7,.98), rgba(8,22,14,.98));
}
#green-view .tower-frame{
  position:relative; width:100%; min-height:clamp(520px,74vh,820px);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  border:1px solid rgba(201,162,39,.30); border-radius:26px; padding:clamp(8px,1.1vw,16px);
  background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(5,11,7,.82));
  box-shadow:0 36px 90px -42px rgba(0,0,0,.95), inset 0 0 0 1px rgba(255,255,255,.035);
}
#green-view .tower-frame::before,#green-view .tower-frame::after{
  content:"";position:absolute;pointer-events:none;z-index:2;
  background:linear-gradient(90deg,transparent,var(--gold),transparent); opacity:.7;
}
#green-view .tower-frame::before{top:9px;left:12%;right:12%;height:1px;}
#green-view .tower-frame::after{bottom:9px;left:12%;right:12%;height:1px;}
#green-view .tower-frame img{width:100%;height:100%;max-height:calc(74vh - 30px);object-fit:contain;object-position:center;display:block;border-radius:16px;filter:saturate(1.05) contrast(1.02);}

/* gallery */
#green-view .gallery-section{background:linear-gradient(180deg,rgba(5,11,7,.1),rgba(5,11,7,.72));}
#green-view .gallery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px);}
#green-view .gallery-card{position:relative;overflow:hidden;min-width:0;border:1px solid rgba(201,162,39,.24);border-radius:22px;background:#08160E;box-shadow:0 26px 65px -36px rgba(0,0,0,.95), inset 0 0 0 1px rgba(255,255,255,.03);}
#green-view .gallery-card::before{content:"";position:absolute;inset:9px;border:1px solid rgba(243,239,228,.10);border-radius:15px;pointer-events:none;z-index:3;}
#green-view .gallery-card::after{content:"";position:absolute;left:9px;top:9px;width:52px;height:1px;background:var(--gold);box-shadow:0 0 16px rgba(201,162,39,.55);z-index:4;pointer-events:none;}
#green-view .gallery-media{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;min-height:0;background:#0a1710;overflow:hidden;}
#green-view .gallery-card img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;transition:transform .8s cubic-bezier(.16,.8,.24,1),filter .5s ease;filter:saturate(1.03) contrast(1.02);}
#green-view .gallery-card:hover img{transform:scale(1.035);filter:saturate(1.08) contrast(1.05);}
#green-view .gallery-caption{position:absolute;left:18px;right:18px;bottom:18px;padding:10px 13px;border-radius:11px;background:rgba(5,11,7,.68);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.08);}

/* amenity highlights (bilingual) */
#green-view #amenity-highlights{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 42px;}
#green-view .amenity-highlight{display:flex;align-items:center;gap:14px;min-height:70px;padding:14px 0;border-bottom:1px solid rgba(243,239,228,.09);}
#green-view .amenity-highlight:nth-last-child(-n+2){border-bottom:none;}
#green-view .amenity-highlight-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none;border:1px solid rgba(201,162,39,.22);background:rgba(201,162,39,.07);}
#green-view .amh-label{font-size:15px;line-height:1.35;}
#green-view .amh-sub{display:block;font-size:12.5px;color:var(--forest-100,#c8d4c4);opacity:.72;margin-top:2px;}

/* checklist */
#green-view .check-item{display:flex;align-items:flex-start;gap:12px;padding:11px 0;border-bottom:1px solid rgba(243,239,228,.08);}
#green-view .check-item:last-child{border-bottom:none;}
#green-view .check-tick{flex:none;width:22px;height:22px;border-radius:50%;background:rgba(127,191,90,.16);border:1px solid rgba(127,191,90,.5);display:grid;place-items:center;margin-top:1px;}

/* unit / type cards */
#green-view .unit-card{border:1px solid rgba(201,162,39,.15); transition:border-color .35s ease, transform .35s ease, background .35s ease; cursor:pointer; text-align:left;}
#green-view .unit-card:hover{border-color:rgba(201,162,39,.55); transform:translateY(-3px);}
#green-view .unit-card.active{border-color:var(--gold); background:rgba(201,162,39,.08);}
#green-view .tag-pill{border:1px solid rgba(201,162,39,.4); color:var(--gold-light); font-size:.7rem; letter-spacing:.08em;}
#green-view .tag-pill-leaf{border:1px solid rgba(127,191,90,.5); color:var(--leaf-light); font-size:.7rem; letter-spacing:.08em;}

/* floor level toggle */
#green-view .level-toggle{display:inline-flex;border:1px solid rgba(201,162,39,.3);border-radius:999px;padding:4px;background:rgba(5,11,7,.5);}
#green-view .level-btn{padding:9px 20px;border-radius:999px;font-size:13px;letter-spacing:.02em;transition:background .3s ease,color .3s ease;}
#green-view .level-btn.active{background:linear-gradient(180deg,var(--gold-light),var(--gold));color:#16210c;font-weight:700;}

/* floor-plan visual frame (matches Grand Residence's proven layout) */
#green-view .floorplan-layout{
  display:grid;grid-template-columns:minmax(240px,32%) minmax(0,68%);
  min-height:clamp(420px,58vh,680px);
  border:1px solid rgba(201,162,39,.26);border-radius:26px;overflow:hidden;
  background:#f4f1e8;box-shadow:0 34px 80px -42px rgba(0,0,0,.95);
}
#green-view .floorplan-copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(24px,3vw,44px);background:linear-gradient(160deg,#123420 0%,#08160E 100%);border-right:1px solid rgba(201,162,39,.24);}
#green-view .floorplan-visual{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;padding:clamp(8px,1.2vw,18px);background:#f4f1e8;}
#green-view .floorplan-visual img{width:100%;height:100%;max-height:calc(58vh - 30px);object-fit:contain;object-position:center;display:block;border-radius:8px;}

/* individual unit detail panel */
#green-view .unit-detail{border:1px solid rgba(201,162,39,.26);border-radius:26px;overflow:hidden;background:#f4f1e8;box-shadow:0 34px 80px -42px rgba(0,0,0,.95);}
#green-view .unit-detail-grid{display:grid;grid-template-columns:1.3fr 1fr;}
#green-view .unit-detail-img{background:#f4f1e8;display:flex;align-items:center;justify-content:center;padding:clamp(10px,1.4vw,20px);}
#green-view .unit-detail-img img{width:100%;height:auto;max-height:520px;object-fit:contain;border-radius:8px;}
#green-view .unit-detail-copy{background:linear-gradient(160deg,#123420 0%,#08160E 100%);padding:clamp(24px,2.6vw,38px);color:var(--ivory);}
#green-view .room-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(243,239,228,.09);font-size:13.5px;}
#green-view .room-row:last-child{border-bottom:none;}
#green-view .room-row .rk{color:var(--gold-light);font-family:'Fraunces',serif;width:22px;flex:none;}
#green-view .room-row .rn{flex:1;padding:0 10px;color:var(--ivory);opacity:.92;}
#green-view .room-row .rv{color:var(--forest-100,#cfe0c9);font-variant-numeric:tabular-nums;}

/* location stat row */
#green-view .stat-row{border-bottom:1px solid rgba(243,239,228,.08);}
#green-view .stat-row:last-child{border-bottom:none;}

/* whatsapp float */
#green-view #wa-float{position:fixed; right:18px; bottom:18px; z-index:55;}

#green-view .scene-h{min-height:100vh;min-height:100svh;}

/* vision / mission split (mirrors the brochure's own light/dark composition) */
#green-view .vm-split{display:grid;grid-template-columns:1fr 1fr;border:1px solid rgba(201,162,39,.22);border-radius:26px;overflow:hidden;box-shadow:0 34px 84px -42px rgba(0,0,0,.9);}
#green-view .vm-light{background:#f4f1e8;color:#0C2417;padding:clamp(28px,4vw,56px);}
#green-view .vm-dark{background:linear-gradient(165deg,#123420,#08160E);padding:clamp(28px,4vw,56px);}
#green-view .vm-quote{background:#0C2417;color:var(--ivory);border-radius:16px;padding:22px 24px;position:relative;}

@media (max-width:1023px){
  #green-view .gallery-grid{grid-template-columns:1fr;gap:18px;}
  #green-view #amenity-highlights{grid-template-columns:1fr;gap:0;}
  #green-view .amenity-highlight:nth-last-child(-n+2){border-bottom:1px solid rgba(243,239,228,.09);}
  #green-view .amenity-highlight:last-child{border-bottom:none;}
  #green-view .floorplan-layout{grid-template-columns:1fr;min-height:0;}
  #green-view .floorplan-copy{border-right:0;border-bottom:1px solid rgba(201,162,39,.24);}
  #green-view .floorplan-visual{min-height:clamp(360px,72vw,560px);}
  #green-view .unit-detail-grid{grid-template-columns:1fr;}
  #green-view .vm-split{grid-template-columns:1fr;}
}
@media (min-width:641px) and (max-width:1023px){
  #green-view .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}
}
@media (max-width:640px){
  #green-view .tower-frame{min-height:clamp(420px,68vh,600px);padding:7px;border-radius:20px;}
  #green-view .gallery-card{border-radius:18px;}
  #green-view .floorplan-copy{padding:26px 20px;}
  #green-view .floorplan-visual{padding:8px;min-height:340px;}
  #green-view .step-num{font-size:1.6rem;}
}

#green-view [hidden]{display:none!important;}
#green-view .sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;}
@media(max-width:767px){
  #green-view #stage{opacity:.92;}
  #green-view .glass{backdrop-filter:blur(12px) saturate(120%);-webkit-backdrop-filter:blur(12px) saturate(120%);}
}