/* =========================
   HOME PAGE: HERO + GLOBE
   ONE REAL CTA PILL + ONE INNER WANDER PILL (mobile JS)
   ========================= */

:root{
  --calyr-magenta:#ff00b8;
}

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

#globe-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
}

.hero{
  position:relative;
  width:100%;
  height:100vh;
  overflow:hidden;
  background:radial-gradient(circle at top,#06091a 0%,#02030a 45%,#000 100%);
}

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

.hero-content{
  position:relative;
  z-index:10;
  max-width:64rem;
  margin:0 auto;
  padding:20vh 2rem 3rem;
  text-align:center;
  pointer-events:none;

  display:flex;
  flex-direction:column;
  align-items:center;
}

.hero-content a,
.hero-content .cta-orbit{
  pointer-events:auto;
}

/* =========================
   TYPOGRAPHY
   ========================= */

.eyebrow{
  font-size:.8rem;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:#8fdcff;
  margin-bottom:1.2rem;
  text-shadow:0 0 10px rgba(140,240,255,.9);
}

.glow-title{
  font-size:clamp(2.4rem,4vw,3.4rem);
  font-weight:800;
  color:#fff;
  text-shadow:
    0 0 18px rgba(0,220,255,.9),
    0 0 42px rgba(255,120,255,.6),
    0 0 72px rgba(0,0,0,.9);
}

.subtitle{
  max-width:42rem;
  margin:1.6rem auto 2.2rem;
  color:#b5d9ef;
  line-height:1.7;
}

.tagline{
  margin-top:.8rem;
  font-size:.9rem;
  color:#8fdcff;
  opacity:.95;
}

.hero-pill-text{
  font-size:.82rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#c9fbff;
  text-shadow:0 0 14px rgba(120,240,255,.55);
  padding:0 18px;
  white-space:nowrap;
}

/* =========================
   ACTION AREA (PILLS)
   ========================= */

.cta-orbit{
  position:relative;
  width:min(620px,92vw);
  height:110px;
  margin:2rem auto 0;
  overflow:visible;
  z-index:20;
}

/* =========================
   BASE PILL
   ========================= */

.pill{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);

  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border-radius:999px;

  background:rgba(0,0,0,.055);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);

  opacity:0;

  /* allow clicking by default (per-pill overrides are possible) */
  pointer-events:auto;

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

/* =========================
   CYAN MAIN PILL (CLICKABLE CTA)
   ========================= */

.hero-window{
  width:min(520px,92vw);
  height:58px;

  border:1px solid rgba(120,240,255,.55);
  box-shadow:
    0 0 10px rgba(120,240,255,.22),
    0 0 18px rgba(255,120,255,.10);

  z-index:10;
  pointer-events:auto;

  /* Always visible (desktop + mobile) */
  opacity: 1;
}

.hero-window:hover{
  transform:translate(-50%,-50%) scale(1.04);
  box-shadow:
    0 0 16px rgba(120,240,255,.35),
    0 0 26px rgba(255,120,255,.18);
}

/* =========================
   MAGENTA PILL (CLICKABLE, JS MOVES IT ON MOBILE)
   ========================= */

.pill-magenta-small{
  width:132px;
  height:32px;

  border:1.25px solid var(--calyr-magenta);
  box-shadow:
    0 0 10px rgba(255,0,184,.35),
    0 0 18px rgba(255,0,184,.18);

  z-index:50;

  /* ✅ must be clickable (link to art.html) */
  pointer-events:auto;
  cursor:pointer;

  /* baseline (JS overwrites transform on mobile) */
  transform:translate(-50%,-50%);
}

.pill-magenta-small:hover{
  /* keep hover subtle; JS may override transform on mobile */
  box-shadow:
    0 0 14px rgba(255,0,184,.55),
    0 0 22px rgba(255,0,184,.25);
}

/* remove any text/ornaments */
.pill-label{ display:none !important; }
.hero-window::before,
.hero-window::after,
.pill-magenta-small::before,
.pill-magenta-small::after{
  content:none !important;
}

/* =========================================================
   IMPORTANT: prevent the magenta pill from blocking clicks
   on the cyan pill IF it drifts over it.
   We solve this by making the magenta pill only clickable
   when it's not overlapping? (CSS can't detect overlap)
   Practical solution: keep it small and let z-index win.
   If you want "cyan always wins", tell me and we can do
   click-through logic in JS.
   ========================================================= */

/* =========================
   INTERACTION MODEL
   Desktop: show pills only on hover/focus
   Mobile: always visible
   ========================= */

@media (hover: hover) and (pointer: fine){
  .cta-orbit:hover .pill,
  .cta-orbit:focus-within .pill{
    opacity:1;
  }
}

@media (hover: none) and (pointer: coarse){

  #globe-canvas{
    opacity: 1;
    /* Avoid softening the WebGL globe; keep color punch without blur. */
    filter: saturate(1.18) brightness(1.28) contrast(1.06);
    transform: translateZ(0);
  }
  .pill{
    opacity:1 !important;
  }
  .pill-magenta-small{
    will-change: transform;
  }
}

/* Fallback for devices that misreport hover/pointer */
@media (max-width: 820px){
  .pill{ opacity: 1 !important; }
}

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

@media (max-width:768px){
  .cta-orbit{ height:120px; }
}

/* =========================
   ARCHITECTURE SECTION (YAML-driven)
   ========================= */

.home-architecture{
  position: relative;
  overflow: hidden;
  padding: 56px 12px 72px;
  background: radial-gradient(circle at top, #06091a 0%, #02030a 55%, #000 100%);
  color: #e8ecff;
}

.home-arch-canvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.85;
  pointer-events: none;
}

.home-arch-inner{
  max-width: 1024px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.home-arch-title{
  margin: 0 0 10px;
  font-size: 1.35rem;
  letter-spacing: 0.02em;
  color: #f3fbff;
  text-shadow: 0 0 18px rgba(0,220,255,.22);
}

.home-arch-lead{
  margin: 0 0 20px;
  max-width: 58rem;
  color: #b5d9ef;
  line-height: 1.7;
}

.home-arch-h3{
  margin: 22px 0 12px;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8fdcff;
}

.home-arch-stack{
  list-style: none;
  padding: 0;
  margin: 0;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.home-arch-step{
  border-radius: 18px;
  border: 1px solid rgba(120,240,255,.38);
  background: radial-gradient(circle at top left,
              rgba(40, 120, 255, 0.12),
              rgba(3, 8, 20, 0.94));
  box-shadow:
    0 0 12px rgba(36, 243, 255, 0.14),
    0 0 42px rgba(0, 0, 0, 0.92);
  padding: 16px 16px 14px;
}

.home-arch-step-name{
  display: inline-flex;
  align-items: center;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #f3fbff;
}

.home-arch-step-desc{
  margin-top: 8px;
  color: #dce8ff;
  line-height: 1.55;
}

.home-arch-bullets{
  margin: 10px 0 0;
  padding-left: 18px;
  color: #a9bedf;
  line-height: 1.55;
}

.home-arch-note{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,120,255,.25);
  background: rgba(255,120,255,.06);
  color: #dce8ff;
}

.home-arch-error{
  color: #ffb3d9;
}

@media (max-width: 820px){
  .home-arch-stack{
    grid-template-columns: 1fr;
  }
}

@media (max-width:480px){
  .cta-orbit{ height:130px; }
  .hero-window{ width:min(360px,92vw); }
  .hero-window{ height:50px; }
  .hero-pill-text{
    font-size:.72rem;
    letter-spacing:.18em;
    padding:0 14px;
  }
}

/* =========================================================
   MOBILE: TRUE OPTICAL CENTERING + SCROLLABLE HERO
   ========================================================= */

@media (hover: none) and (pointer: coarse){

  .hero{
    min-height: 100svh;
    height: auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .hero-content{
    padding: 0 1.25rem 2rem !important;
    min-height: 100svh;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    text-align:center;
  }

  .eyebrow{ margin-bottom: 0.9rem; }
  .subtitle{ margin: 1.1rem auto 1.3rem; }
  .tagline{ margin-top: 0.9rem; }
}