@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Manrope:wght@500;600;700&display=swap');


:root{
  --bg:#05060a;
  --text:#f4f5f5;
  --muted:#979b9f;

  --warm:#d4bfa6;
  --silver:#aab4bc;

  --glass:rgba(11,13,17,.52);
  --glass-strong:rgba(15,17,21,.64);

  --line:rgba(230,225,216,.13);

  --radius:28px;
}


*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}


html,
body{
  width:100%;
  min-height:100%;

  background:var(--bg);
  color:var(--text);

  font-family:
    Inter,
    Arial,
    sans-serif;
}


body{
  overflow-x:hidden;
}


a{
  color:inherit;
  text-decoration:none;
}


/* ============================================================
   EXPERIENCE
   ============================================================ */

.experience{
  position:relative;

  height:320vh;

  background:
    #05060a;
}


.stage{
  position:sticky;

  top:0;

  height:100vh;
  width:100%;

  overflow:hidden;

  isolation:isolate;

  background:
    radial-gradient(
      circle at 50% 28%,
      rgba(165,176,184,.045),
      transparent 36%
    ),

    linear-gradient(
      180deg,
      #0b0d12 0%,
      #06070a 58%,
      #040506 100%
    );
}


/* ============================================================
   WEBGL
   ============================================================ */

#webgl{
  position:absolute;

  inset:0;

  width:100%;
  height:100%;

  display:block;

  z-index:0;

  opacity:1;

  will-change:
    opacity;
}


/* ============================================================
   CINEMATIC VIGNETTE
   ============================================================ */

.stage::after{
  content:"";

  position:absolute;
  inset:0;

  z-index:1;

  pointer-events:none;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.12),
      transparent 22%,
      transparent 68%,
      rgba(0,0,0,.42)
    ),

    radial-gradient(
      circle at 50% 45%,
      transparent 34%,
      rgba(0,0,0,.31) 100%
    );
}


/* ============================================================
   VERY SUBTLE GRAIN
   ============================================================ */



/* ============================================================
   BRAND
   ============================================================ */

.brandbar{
  position:absolute;

  z-index:10;

  top:0;
  left:0;

  width:100%;

  padding:
    28px
    34px;

  display:flex;

  align-items:center;
  justify-content:space-between;

  pointer-events:none;
}


.brand{
  display:flex;

  align-items:center;

  gap:11px;

  pointer-events:auto;

  font-family:
    Manrope,
    sans-serif;

  font-size:11px;
  font-weight:600;

  letter-spacing:.18em;

  color:
    rgba(
      245,
      244,
      240,
      .82
    );
}


/* ============================================================
   REAL CHRYSASYNTH LOGO
   ============================================================ */

.brand-logo{
  width:140px;
  height:auto;

  display:block;
  object-fit:contain;

  opacity:.92;

  filter:
    drop-shadow(
      0 0 10px
      rgba(212,191,166,.12)
    );
}

/* ============================================================
   SCROLL HINT
   ============================================================ */

.scroll-hint{
  display:flex;

  align-items:center;

  gap:12px;

  font-size:9px;

  letter-spacing:.22em;

  color:
    rgba(
      235,
      232,
      226,
      .44
    );
}


.scroll-line{
  position:relative;

  width:44px;
  height:1px;

  overflow:hidden;

  background:
    rgba(
      255,
      255,
      255,
      .11
    );
}


.scroll-line::after{
  content:"";

  position:absolute;

  inset:0;

  background:
    var(--warm);

  opacity:.62;

  animation:
    scan
    1.9s
    ease-in-out
    infinite;
}


@keyframes scan{

  0%{
    transform:
      translateX(-100%);
  }

  50%{
    transform:
      translateX(0);
  }

  100%{
    transform:
      translateX(100%);
  }

}


/* ============================================================
   HERO
   ============================================================ */

.hero-copy{
  position:absolute;

  z-index:4;

  left:50%;
  top:50%;

  transform:
    translate(
      -50%,
      -50%
    );

  width:
    min(
      760px,
      calc(100% - 44px)
    );

  text-align:center;

  pointer-events:none;

  will-change:
    opacity,
    transform;
}


.eyebrow{
  font-size:10px;

  font-weight:600;

  letter-spacing:.26em;

  color:
    rgba(
      220,
      218,
      212,
      .48
    );

  margin-bottom:20px;
}


.hero-copy h1,
.final-heading h2{
  font-family:
    Manrope,
    sans-serif;

  font-weight:600;

  letter-spacing:-.055em;
}


.hero-copy h1{
  font-size:
    clamp(
      50px,
      7vw,
      104px
    );

  line-height:.94;

  color:
    #f1f1ef;
}


.hero-copy p{
  margin:
    22px
    auto
    0;

  max-width:520px;

  color:
    rgba(
      208,
      207,
      203,
      .60
    );

  line-height:1.7;

  font-size:14px;
}


/* ============================================================
   FINAL VEIL
   Graphite + silver + rare warm light
   ============================================================ */

.veil{
  position:absolute;

  inset:0;

  z-index:2;

  pointer-events:none;

  opacity:0;

  overflow:hidden;

 transform:none;

 background:

  /* soft central depth */
  radial-gradient(
    ellipse 85% 75% at 50% 48%,
    rgba(76, 84, 94, .14) 0%,
    rgba(42, 47, 55, .07) 34%,
    transparent 68%
  ),

  /* subtle steel atmosphere */
  radial-gradient(
    ellipse 65% 80% at 88% 18%,
    rgba(84, 105, 124, .11) 0%,
    rgba(52, 65, 78, .035) 42%,
    transparent 72%
  ),

  /* very restrained warm depth */
  radial-gradient(
    ellipse 55% 45% at 38% 105%,
    rgba(212, 191, 166, .075) 0%,
    rgba(135, 111, 91, .025) 42%,
    transparent 72%
  ),

  /* graphite base */
  linear-gradient(
    145deg,
    #090b0f 0%,
    #101319 36%,
    #171a20 64%,
    #0a0c10 100%
  );

  will-change:
    opacity,
    transform;
}


/* ============================================================
   SILVER LIGHT FIELD
   ============================================================ */

.veil::before{
  content:"";

  position:absolute;
  inset:-20%;

  pointer-events:none;

  background:
    radial-gradient(
      ellipse at 50% 46%,
      rgba(205,207,204,.10) 0%,
      rgba(155,158,158,.055) 30%,
      rgba(100,103,105,.018) 50%,
      transparent 72%
    );

  filter:blur(70px);

  opacity:.46;

  transform:none;

  animation:none;
}


/* ============================================================
   WARM LIGHT FIELD
   Very restrained
   ============================================================ */

.veil::after{
  content:"";

  position:absolute;

  width:60vw;
  height:60vw;

  left:48%;
  top:42%;

  transform:
    translate(
      -50%,
      -50%
    );

  border-radius:50%;

  background:
    radial-gradient(
      circle,

      rgba(
        212,
        191,
        166,
        .13
      ) 0%,

      rgba(
        145,
        124,
        104,
        .055
      ) 28%,

      transparent 65%
    );

  filter:
    blur(70px);

  opacity:.72;

  animation:
    warmBreath
    11s
    ease-in-out
    infinite
    alternate;
}




@keyframes warmBreath{

  0%{
    transform:
      translate(
        -50%,
        -50%
      )
      scale(.92);

    opacity:.46;
  }


  100%{
    transform:
      translate(
        -50%,
        -50%
      )
      scale(1.08);

    opacity:.78;
  }

}


/* ============================================================
   FINAL UI
   ============================================================ */

.final-ui{
  position:absolute;

  inset:0;

  z-index:7;

  display:flex;

  align-items:center;
  justify-content:center;

  padding:
    76px
    34px
    44px;

  opacity:0;

  pointer-events:none;
}


.final-shell{
  width:
    min(
      1160px,
      100%
    );
}


/* ============================================================
   FINAL HEADING
   ============================================================ */

.final-heading{
  margin-bottom:28px;

  opacity:0;

  transform:
    translateY(18px);
}


.final-heading h2{
  font-size:
    clamp(
      40px,
      5vw,
      70px
    );

  line-height:.98;

  color:
    #f0efec;
}


/* ============================================================
   CARDS
   ============================================================ */

.cards{
  display:grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );

  gap:18px;
}


.portal-card{
  min-height:318px;
  position:relative;
  overflow:hidden;

  padding:24px;

  display:flex;
  flex-direction:column;
  justify-content:space-between;

  border:1px solid rgba(255,255,255,.12);
  border-radius:28px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.085),
      rgba(255,255,255,.025) 44%,
      rgba(255,255,255,.008) 100%
    ),
    rgba(10,12,16,.34);

  backdrop-filter:
    blur(28px)
    saturate(125%)
    brightness(1.03);

  -webkit-backdrop-filter:
    blur(28px)
    saturate(125%)
    brightness(1.03);

  box-shadow:
    0 28px 70px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(255,255,255,.025);

  opacity:0;

  transform:
    translateY(34px)
    scale(.985);

  transition:
    transform .4s cubic-bezier(.22,.72,.22,1),
    border-color .35s ease,
    box-shadow .35s ease,
    background .35s ease;
}


/* ============================================================
   LARGE REFLECTION FIELD
   ============================================================ */

.portal-card::before{
  content:"";

  position:absolute;

  width:240px;
  height:360px;

  left:-120px;
  top:-90px;

  border-radius:50%;

  background:
    radial-gradient(
      ellipse,
      rgba(255,245,232,.20) 0%,
      rgba(212,191,166,.10) 30%,
      rgba(170,180,190,.04) 48%,
      transparent 72%
    );

  filter:blur(30px);

  opacity:.38;

  transform:
    rotate(18deg)
    translate3d(0,0,0);

  transition:
    opacity .45s ease,
    transform .65s cubic-bezier(.22,.72,.22,1);

  pointer-events:none;
}


/* ============================================================
   GLASS EDGE / SPECULAR STREAK
   ============================================================ */

.portal-card::after{
  content:"";

  position:absolute;
  inset:0;

  border-radius:inherit;

  pointer-events:none;

  background:
    linear-gradient(
      115deg,
      transparent 16%,
      rgba(255,255,255,.04) 28%,
      rgba(255,246,232,.15) 42%,
      rgba(255,255,255,.035) 51%,
      transparent 66%
    );

  transform:
    translateX(-72%);

  opacity:0;

  transition:
    transform .8s cubic-bezier(.22,.72,.22,1),
    opacity .4s ease;
}


/* ============================================================
   FEATURED CARD
   ============================================================ */

.portal-card--featured{
  background:
    linear-gradient(
      145deg,
      rgba(255,248,238,.10),
      rgba(255,255,255,.028) 46%,
      rgba(255,255,255,.012) 100%
    ),
    rgba(13,15,19,.46);

  border-color:
    rgba(212,191,166,.18);
}


/* ============================================================
   HOVER
   ============================================================ */

.portal-card:hover{
  transform:
    translateY(-9px)
    scale(1.012);

  border-color:
    rgba(225,208,187,.34);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.11),
      rgba(255,255,255,.035) 46%,
      rgba(255,255,255,.012) 100%
    ),
    rgba(12,14,18,.42);

  box-shadow:
    0 34px 90px rgba(0,0,0,.38),

    0 0 40px rgba(212,191,166,.08),

    0 0 80px rgba(177,190,202,.045),

    inset 0 1px 0 rgba(255,255,255,.15),

    inset 0 -1px 0 rgba(255,255,255,.035);
}


.portal-card:hover::before{
  opacity:.74;

  transform:
    rotate(18deg)
    translate3d(
      95px,
      40px,
      0
    )
    scale(1.12);
}


.portal-card:hover::after{
  opacity:1;

  transform:
    translateX(72%);
}


/* ============================================================
   DOT
   ============================================================ */

.card-dot{
  width:8px;
  height:8px;

  border-radius:50%;

  background:#d4bfa6;

  box-shadow:
    0 0 10px rgba(212,191,166,.42),
    0 0 24px rgba(212,191,166,.18);

  transition:
    transform .35s ease,
    box-shadow .35s ease;
}


.portal-card:hover .card-dot{
  transform:
    scale(1.2);

  box-shadow:
    0 0 12px rgba(212,191,166,.62),
    0 0 34px rgba(212,191,166,.28);
}


/* ============================================================
   CTA ARROW
   ============================================================ */

.card-bottom span:last-child{
  transition:
    transform .35s cubic-bezier(.22,.72,.22,1),
    color .35s ease;
}


.portal-card:hover
.card-bottom span:last-child{
  transform:
    translate(4px,-4px);

  color:#efe6db;
}


/* ============================================================
   CARD CONTENT
   ============================================================ */

.card-top,
.card-bottom{
  display:flex;

  align-items:center;

  justify-content:
    space-between;
}


.card-top{
  font-size:10px;

  letter-spacing:.18em;

  color:
    rgba(
      236,
      231,
      222,
      .40
    );
}


.card-dot{
  width:8px;
  height:8px;

  border-radius:50%;

  background:
    var(--warm);

  box-shadow:
    0 0 16px
    rgba(
      212,
      191,
      166,
      .30
    );
}


.card-main h3{
  font-family:
    Manrope,
    sans-serif;

  font-size:
    clamp(
      28px,
      3vw,
      42px
    );

  letter-spacing:
    -.045em;

  margin-bottom:
    12px;

  color:
    #f0efec;
}


.card-main p{
  max-width:
    300px;

  color:
    rgba(
      207,
      204,
      198,
      .56
    );

  font-size:
    13px;

  line-height:
    1.65;
}


.card-bottom{
  padding-top:
    20px;

  border-top:
    1px solid
    rgba(
      230,
      224,
      214,
      .09
    );

  color:
    rgba(
      234,
      229,
      220,
      .68
    );

  font-size:
    11px;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media(
  max-width:900px
){

  .experience{
    height:
      360vh;
  }


  .brandbar{
    padding:
      22px
      20px;
  }


  .scroll-hint{
    display:none;
  }


  .final-ui{
    align-items:flex-end;

    padding:
      78px
      18px
      24px;
  }


  .cards{
    grid-template-columns:
      1fr;

    gap:10px;
  }


  .portal-card{
    min-height:
      166px;

    padding:
      18px;
  }


  .card-main h3{
    font-size:
      28px;
  }


  .card-main p{
    font-size:
      12px;
  }

}


@media(
  prefers-reduced-motion:
  reduce
){

  .veil::before,
  .veil::after{
    animation:none;
  }


  .scroll-line::after{
    animation:none;
  }

}