/* =========================
   BASE / SAFARI BACKGROUND
   (base.css — global foundational styles)
========================= */

html{
  background: var(--bg0);
  height:100%;
}

body{
  min-height:100%;
  margin:0;
  color:var(--ink);
  line-height:1.55;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  letter-spacing:.01em;

  background:
    radial-gradient(1200px 800px at 70% 20%, rgba(123,210,255,.14), transparent 60%),
    linear-gradient(180deg,var(--bg2),var(--bg0) 70%);

  animation:aoaOnline 900ms ease-out 1;
}

@keyframes aoaOnline{
  0%{filter:blur(1.2px);opacity:.92;}
  100%{filter:blur(0);opacity:1;}
}

*{box-sizing:border-box;}

/* =========================
   LINKS
========================= */

a{
  color:var(--ink);
  text-decoration:none;
  position:relative;
}

a:hover{
  color:var(--accent);
}

a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-2px;
  height:1px;
  width:0%;
  background:var(--accent);
  transition:width .25s ease;
}

a:hover::after{
  width:100%;
}

/* =========================
   CONTAINER
========================= */

.container{
  max-width:var(--max);
  margin:0 auto;
  padding:0 20px;
}

/* =========================
   HEADINGS
========================= */

h1,.h1,h2,h3{
  letter-spacing:.04em;
  text-shadow:
    0 0 14px rgba(123,210,255,.10),
    0 0 2px rgba(255,255,255,.15);
}

h1,.h1{
  font-weight:500;
}

/* =========================
   IMMERSIVE ATMOSPHERE
========================= */

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(1200px 900px at 75% 15%, rgba(123,210,255,.10), transparent 60%),
    radial-gradient(900px 700px at 20% 85%, rgba(255,255,255,.05), transparent 60%);
  animation:atmosphereShift 28s ease-in-out infinite alternate;
  z-index:-1;
}

@keyframes atmosphereShift{
  0%{transform:scale(1);opacity:.85;}
  100%{transform:scale(1.05);opacity:1;}
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at center,transparent 55%,rgba(3,28,36,.40) 100%);
  z-index:-1;
}

/* =========================
   CONTENT STACKING
========================= */

main,
.site-footer{
  position:relative;
  z-index:1;
}

/* =========================
   SECTION RHYTHM
========================= */

.section{
  position:relative;
}

/* divider line */
.section::before{
  content:"";
  position:absolute;
  left:20px;
  right:20px;
  top:0;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(123,210,255,.18),
    transparent
  );
  opacity:.65;
}

/* soft section falloff */
.section::after{
  content:"";
  position:absolute;
  bottom:-1px;
  left:0;
  right:0;
  height:60px;
  pointer-events:none;
  background:linear-gradient(
    to bottom,
    transparent,
    rgba(3,28,36,.45)
  );
}

.section:nth-of-type(even){
  background:rgba(255,255,255,.015);
}

/* =========================
   GLOBAL CONTENT PADDING
========================= */

.section > *:not(.container),
main > *:not(.hero){
  padding-left:20px;
  padding-right:20px;
}

@media (min-width:768px){

  .section > *:not(.container),
  main > *:not(.hero){
    padding-left:28px;
    padding-right:28px;
  }

}

/* =========================
   JS REVEAL EFFECTS
========================= */

.js .card,
.js .hero-card{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .8s ease,transform .8s ease;
}

.js .card.reveal,
.js .hero-card.reveal{
  opacity:1;
  transform:translateY(0);
}