/* =========================================================================
   SEBAS GRANDA REAL ESTATE — ARCHITECTURAL LIGHT REVEAL V01
   Hoja de estilo exclusiva de la intro.
   ========================================================================= */

:root{
  --sg-void:        #05070a;
  --sg-void-2:      #0a121a;
  --sg-champagne:   #e7d3ae;
  --sg-bone:        #f6f1e8;
  --sg-glow:        0;
  --sg-vignette:    .42;
  --sg-serif:       "Didot", "Bodoni MT", "Playfair Display", "Hoefler Text", Garamond, Georgia, "Times New Roman", serif;
  --sg-sans:        "Optima", "Avenir Next", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
}

/* -------------------------------------------------------------------------
   NOTA DE INTEGRACIÓN (home v01)
   Esta hoja es la de la intro aprobada, con las reglas globales de html/body
   retiradas: el bloqueo de scroll, la tipografía y el fondo los gobierna
   realestate-v01.css (html.sg-awaiting-intro). Todo lo demás es idéntico.
   ------------------------------------------------------------------------- */

*,*::before,*::after{ box-sizing:border-box; }

/* -------------------------------------------------------------------------
   1. CONTENEDOR
   ------------------------------------------------------------------------- */

.sg-intro{
  position:fixed;
  inset:0;
  z-index:1000;
  overflow:hidden;
  background:
    radial-gradient(130% 105% at 50% 58%, #0a121a 0%, #05070a 68%, #030405 100%);
  contain:strict;
}

.sg-intro__canvas{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  opacity:1;
  transition:opacity 260ms ease;
}

/* Modo rápido (sesión ya vista / reduced motion): sólo un fundido corto. */
.sg-intro.is-quick .sg-intro__canvas,
.sg-intro.is-quick .sg-intro__still,
.sg-intro.is-quick .sg-intro__poster{ opacity:0; }
.sg-intro.is-quick.is-shown .sg-intro__canvas{ opacity:1; }
.sg-intro.is-quick.is-shown .sg-intro__still.is-visible{ opacity:1; }
.sg-intro.is-quick.is-shown.is-poster .sg-intro__poster{ opacity:1; }

/* -------------------------------------------------------------------------
   2. FRAME FINAL CAPTURADO (handoff hacia el futuro hero)
   ------------------------------------------------------------------------- */

.sg-intro__still{
  position:absolute;
  inset:0;
  background-color:var(--sg-void);
  background-repeat:no-repeat;
  background-position:50% 50%;
  background-size:cover;
  opacity:0;
  transition:opacity 140ms linear;
  pointer-events:none;
}
.sg-intro__still.is-visible{ opacity:1; }

/* -------------------------------------------------------------------------
   3. POSTER FALLBACK (sin WebGL, sin JS, timeout o recurso fallido)
   ------------------------------------------------------------------------- */

.sg-intro__poster{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity 300ms ease;
  pointer-events:none;
  background:
    radial-gradient(46% 30% at 27% 61%, rgba(255,198,133,.60) 0%, rgba(255,198,133,0) 68%),
    linear-gradient(180deg,
      #0f1a2c 0%,
      #23304a 20%,
      #4c5468 38%,
      #8f7256 52%,
      #d7a373 61%,
      #c08d5f 66%,
      #4a4239 72%,
      #2b2723 84%,
      #1b1815 100%);
}
.sg-intro.is-poster .sg-intro__poster{ opacity:1; }

.sg-intro__ridge{
  position:absolute;
  left:-2%;
  right:-2%;
  top:58%;
  height:16%;
  background:linear-gradient(180deg,#2b2f3a 0%,#1d2026 100%);
  opacity:.92;
  clip-path:polygon(0 100%,0 66%,7% 50%,14% 61%,22% 37%,31% 55%,40% 30%,49% 49%,58% 26%,67% 47%,76% 33%,85% 52%,93% 41%,100% 56%,100% 100%);
}
.sg-intro__ridge--far{
  top:53%;
  height:14%;
  background:linear-gradient(180deg,#6c6a6d 0%,#4a4a52 100%);
  opacity:.55;
  clip-path:polygon(0 100%,0 72%,9% 55%,19% 68%,28% 46%,38% 62%,47% 40%,57% 58%,66% 44%,76% 60%,86% 48%,95% 62%,100% 52%,100% 100%);
}
.sg-intro__deck{
  position:absolute;
  left:0; right:0;
  top:74%; bottom:0;
  background:
    linear-gradient(180deg, rgba(232,175,116,.42) 0%, rgba(120,96,74,.55) 26%, rgba(24,26,28,.92) 100%);
}

/* -------------------------------------------------------------------------
   4. GRADE: glow cálido + viñeta
   ------------------------------------------------------------------------- */

.sg-intro__grade{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(58% 46% at 24% 56%, rgba(255,186,116,var(--sg-glow)) 0%, rgba(255,186,116,0) 70%),
    radial-gradient(125% 105% at 50% 48%, rgba(0,0,0,0) 42%, rgba(0,0,0,var(--sg-vignette)) 100%);
  transition:background 700ms linear;
  mix-blend-mode:normal;
}

/* -------------------------------------------------------------------------
   5. BRAND REVEAL
   ------------------------------------------------------------------------- */

.sg-intro__brand{
  position:absolute;
  left:50%;
  bottom:15%;
  transform:translate(-50%,12px);
  width:min(90vw,780px);
  text-align:center;
  opacity:0;
  pointer-events:none;
  transition:opacity 360ms ease, transform 560ms cubic-bezier(.22,.61,.36,1);
  text-shadow:0 1px 26px rgba(0,0,0,.45);
}
.sg-intro.is-brand .sg-intro__brand{
  opacity:1;
  transform:translate(-50%,0);
}

.sg-intro__name,
.sg-intro__sub,
.sg-intro__claim{ margin:0; text-transform:uppercase; }

.sg-intro__name{
  font-family:var(--sg-serif);
  font-weight:400;
  font-size:clamp(23px,3.5vw,46px);
  line-height:1.08;
  letter-spacing:.30em;
  text-indent:.30em;
  color:var(--sg-bone);
}
.sg-intro__sub{
  margin-top:clamp(8px,1vw,13px);
  font-size:clamp(8.5px,1.02vw,12px);
  font-weight:400;
  letter-spacing:.54em;
  text-indent:.54em;
  color:rgba(231,211,174,.88);
}
.sg-intro__claim{
  position:relative;
  margin-top:clamp(16px,1.8vw,24px);
  padding-top:clamp(14px,1.6vw,20px);
  font-size:clamp(8px,.92vw,11px);
  letter-spacing:.34em;
  text-indent:.34em;
  color:rgba(246,241,232,.58);
}
.sg-intro__claim::before{
  content:"";
  position:absolute;
  top:0; left:50%;
  width:46px;
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,rgba(231,211,174,0),rgba(231,211,174,.55),rgba(231,211,174,0));
}

/* -------------------------------------------------------------------------
   6. SALTAR ANIMACIÓN (visible desde 0.00 s, accesible por teclado)
   ------------------------------------------------------------------------- */

.sg-intro__skip{
  position:absolute;
  top:calc(env(safe-area-inset-top,0px) + clamp(14px,2.1vw,26px));
  right:calc(env(safe-area-inset-right,0px) + clamp(14px,2.1vw,26px));
  z-index:10;
  display:inline-block;
  margin:0;
  padding:6px 0 4px;
  border:0;
  background:none;
  color:rgba(231,211,174,.70);
  font-family:var(--sg-sans);
  font-size:clamp(9px,.78vw,10.5px);
  letter-spacing:.26em;
  text-transform:uppercase;
  line-height:1;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:color 240ms ease, opacity 300ms ease;
}
.sg-intro__skip span{ margin-left:.35em; }
.sg-intro__skip::after{
  content:"";
  display:block;
  height:1px;
  margin-top:7px;
  background:currentColor;
  opacity:.4;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform 320ms cubic-bezier(.22,.61,.36,1);
}
.sg-intro__skip:hover,
.sg-intro__skip:focus-visible{ color:var(--sg-bone); }
.sg-intro__skip:hover::after,
.sg-intro__skip:focus-visible::after{ transform:scaleX(1); }
.sg-intro__skip:focus-visible{
  outline:1px solid rgba(231,211,174,.65);
  outline-offset:8px;
}
.sg-intro.is-complete .sg-intro__skip{
  opacity:0;
  pointer-events:none;
}

/* -------------------------------------------------------------------------
   7. ESPACIO RESERVADO PARA LA FUTURA PÁGINA
   ------------------------------------------------------------------------- */

.sg-site{
  position:relative;
  z-index:1;
  min-height:100vh;
}
.sg-site[hidden]{ display:none; }

/* -------------------------------------------------------------------------
   8. REDUCED MOTION
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce){
  .sg-intro__brand{ transition:opacity 220ms linear; transform:translate(-50%,0); }
  .sg-intro__canvas,
  .sg-intro__still,
  .sg-intro__poster{ transition:opacity 240ms linear; }
  .sg-intro__grade{ transition:none; }
  .sg-intro__skip::after{ transition:none; }
}

/* -------------------------------------------------------------------------
   9. AJUSTES DE COMPOSICIÓN EN PANTALLAS PEQUEÑAS
   ------------------------------------------------------------------------- */

@media (max-width: 640px){
  .sg-intro__brand{ bottom:13%; }
  .sg-intro__name{ letter-spacing:.24em; text-indent:.24em; }
  .sg-intro__sub{ letter-spacing:.44em; text-indent:.44em; }
  .sg-intro__claim{ letter-spacing:.26em; text-indent:.26em; }
}

@media (max-height: 460px) and (orientation: landscape){
  .sg-intro__brand{ bottom:9%; }
}