/* CET Ember: one continuous environment, with a single quiet motion vocabulary. */
.home-page {
  --cet-amber: var(--cet-orange);
  --cet-dark: #080a0c;
}
.home-page main { overflow: clip; background: var(--cet-dark); }
.home-page main > section { position: relative; }
.home-page .hero,
.home-page .alpha-problem,
.home-page .belief-system,
.home-page .resources-section,
.home-page .home-contact { isolation: isolate; }

/* A slow reflection is the only moving layer over the hero photograph. */
.home-page .cet-hero-reflection {
  position: absolute; z-index: 2; inset: 88px 0 0 38%; pointer-events: none;
  background: linear-gradient(111deg, transparent 39%, rgb(var(--cet-orange-light-rgb) / 0.035) 49%, #ffffff0a 50%, transparent 58%);
  background-size: 240% 100%; mix-blend-mode: screen;
  animation: cet-glass 28s ease-in-out infinite;
}
.home-page .hero:before {
  background: linear-gradient(90deg, #080a0cf7 0%, #080a0ce8 29%, #080a0c69 55%, transparent 82%),
    linear-gradient(0deg, #080a0c 0%, transparent 31%, #080a0c30 100%);
}
.home-page .hero:after { box-shadow: 0 0 18px rgb(var(--cet-orange-rgb) / 0.2); }

/* The proof band enters the same architectural wall rather than dividing it. */
.home-page .trust-strip { z-index: 3; }
.home-page .alpha-problem {
  margin-top: -42px;
  background: linear-gradient(180deg, #080a0c 0%, #0d1012 12%, #111416 51%, #090b0d 78%, #08090b 100%);
}
.home-page .alpha-problem:before {
  z-index: 0; opacity: .83;
  background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 2px), #c7d3d40c calc(25% - 1px) 25%),
    repeating-linear-gradient(0deg, transparent 0 165px, #a1a9a80a 166px 167px),
    linear-gradient(0deg, #08090b 0%, transparent 27%, transparent 65%, #080a0c 100%);
  mask-image: linear-gradient(0deg, transparent, #000 29%, #000 79%, transparent);
}
.home-page .cet-wall-light {
  position: absolute; z-index: 1; top: 11%; bottom: 15%; right: 15%; width: 1px;
  background: linear-gradient(transparent, rgb(var(--cet-orange-rgb) / 0.333) 30%, rgb(var(--cet-orange-rgb) / 0.09) 75%, transparent);
  box-shadow: 0 0 30px 7px rgb(var(--cet-orange-rgb) / 0.071), 0 0 95px 32px rgb(var(--cet-orange-rgb) / 0.043);
  pointer-events: none; opacity: .6;
}
.home-page .alpha-problem .story-path {
  background: linear-gradient(180deg, #1a1d1ec9, #0a0d0edb);
  border-color: rgb(var(--cet-orange-deep-rgb) / 0.239); backdrop-filter: blur(9px);
}
.home-page .alpha-problem .story-card { background: linear-gradient(180deg, rgb(var(--cet-orange-rgb) / 0.043), transparent 41%); }
.home-page .alpha-problem .story-card.active {
  background: linear-gradient(180deg, rgb(var(--cet-orange-rgb) / 0.129), #141719 32%, #0b0d0edb);
  box-shadow: inset 0 1px rgb(var(--cet-orange-light-rgb) / 0.322), 0 -12px 43px rgb(var(--cet-orange-rgb) / 0.125);
}
.home-page .alpha-problem .story-card.active .story-icon { box-shadow: 0 0 28px rgb(var(--cet-orange-rgb) / 0.278); }
.home-page .story-conclusion { position: relative; z-index: 2; }
.home-page .alpha-problem:after {
  content: ""; position: absolute; z-index: 1; pointer-events: none; inset: auto 0 0; height: 200px;
  background: linear-gradient(0deg, #08090b, transparent);
}

/* The belief statement is in near-black. The room emerges below it. */
.home-page .belief-system {
  background: #08090b;
  padding-top: 165px;
}
.home-page .belief-system:before {
  z-index: 0; inset: 0; height: auto;
  background: radial-gradient(ellipse at 104% 24%, rgb(var(--cet-orange-deep-rgb) / 0.114), transparent 42%),
    radial-gradient(ellipse at -11% 14%, rgb(var(--cet-orange-deep-rgb) / 0.071), transparent 40%),
    linear-gradient(180deg, #08090b 0%, #090b0d 37%, #101416 73%, #090b0d 100%);
}
.home-page .belief-system:after {
  z-index: 0;
  background: linear-gradient(0deg, #090b0d, transparent 25%);
}
.home-page .belief-system > :not(.belief-grid-bg):not(.belief-orbit):not(.cet-chamber):not(.cet-glass-room):not(.cet-orb) {
  position: relative; z-index: 3;
}
.home-page .belief-grid-bg { z-index: 1; opacity: .11; mask-image: linear-gradient(0deg, #000, transparent 78%); }
.home-page .belief-heading { max-width: 810px; position: relative; z-index: 3; }
.home-page .belief-heading h2 { text-shadow: 0 3px 28px #000; }
.home-page .belief-heading h2 em { text-shadow: 0 0 39px rgb(var(--cet-orange-rgb) / 0.188); }
.home-page .belief-system > .cet-chamber {
  position: absolute; z-index: 1; inset: 0 0 auto; height: 750px; overflow: hidden;
  pointer-events: none;
  background: radial-gradient(ellipse at 95% 38%, rgb(var(--cet-orange-rgb) / 0.09), transparent 37%),
    radial-gradient(ellipse at 50% 79%, rgb(var(--cet-orange-deep-rgb) / 0.063), transparent 65%);
  mask-image: linear-gradient(0deg, transparent, #000 18%, #000 75%, transparent);
}
.home-page .cet-chamber:before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 73% 52%, rgb(var(--cet-orange-light-rgb) / 0.063), transparent 48%);
  filter: blur(28px); animation: cet-breathe 19s ease-in-out infinite;
}
.home-page .cet-chamber span {
  position: absolute; width: 2px; height: 2px; border-radius: 50%;
  background: var(--cet-orange); box-shadow: 0 0 10px 2px rgb(var(--cet-orange-rgb) / 0.314);
  opacity: .35; animation: cet-ember 20s linear infinite; animation-play-state: paused;
}
.home-page .belief-system.is-ambient-active .cet-chamber span { animation-play-state: running; }
.home-page .cet-chamber span:nth-child(1) { left: 69%; top: 75%; animation-delay: -2s; }
.home-page .cet-chamber span:nth-child(2) { left: 81%; top: 62%; animation-delay: -8s; }
.home-page .cet-chamber span:nth-child(3) { left: 94%; top: 79%; animation-delay: -13s; }
.home-page .cet-chamber span:nth-child(4) { left: 57%; top: 88%; animation-delay: -6s; }
.home-page .cet-chamber span:nth-child(5) { left: 75%; top: 91%; animation-delay: -16s; }
.home-page .cet-chamber span:nth-child(6) { left: 88%; top: 86%; animation-delay: -10s; }
.home-page .cet-chamber span:nth-child(7) { left: 98%; top: 67%; animation-delay: -4s; }
.home-page .cet-glass-room {
  position: absolute !important; z-index: 1 !important; pointer-events: none;
  top: 590px; right: 0; bottom: 0; left: 0;
  background: linear-gradient(0deg, #090b0d 1%, #090b0dd9 20%, #090b0dd9 46%, #090b0d 96%),
    linear-gradient(90deg, #080a0c, #080a0caa 38%, #080a0c30 85%),
    url('assets/585520A5-6096-4764-B8F0-25AF67C6768C.jpeg') center center / cover no-repeat;
  mask-image: linear-gradient(0deg, #000 72%, transparent 100%);
}
.home-page .cet-glass-room:after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 19.8%, #d1c1ae10 20%, transparent 20.2% 40%),
    linear-gradient(98deg, transparent 43%, rgb(var(--cet-orange-light-rgb) / 0.051) 50%, transparent 57%);
  background-size: auto, 210% 100%;
  animation: cet-glass 30s ease-in-out infinite;
}
.home-page .belief-experience { border-color: rgb(var(--cet-orange-rgb) / 0.22); box-shadow: 0 36px 100px #000d, inset 0 1px rgb(var(--cet-orange-light-rgb) / 0.114); }
.home-page .belief-stage.active { box-shadow: inset 2px 0 var(--cet-orange), inset 20px 0 40px rgb(var(--cet-orange-rgb) / 0.055); }
.home-page .belief-close > div span { background: #141819a8; backdrop-filter: blur(8px); }
.home-page .cet-orb {
  position: absolute !important; z-index: 2 !important; top: 145px; right: 9%;
  width: clamp(140px, 17vw, 245px); pointer-events: none; opacity: .72;
  filter: drop-shadow(0 27px 34px #000c);
}
.home-page .cet-orb img { width: 100%; height: auto; display: block; animation: cet-object 10s ease-in-out infinite; }

/* The architecture resolves into a real shelving environment. */
.home-page .resources-section {
  margin-top: -1px; padding-top: 165px;
  border-top: 0; background: #090b0d;
}
.home-page .resources-section:before {
  z-index: 0; opacity: 1; inset: 0;
  background: linear-gradient(180deg, #090b0d 0%, #090b0d9c 12%, #090b0d82 32%, #090b0da6 82%, #090b0d 100%),
    linear-gradient(90deg, #090b0d8c, transparent 50%, #090b0d75),
    url('assets/cet-executive-shelves.webp') center 49% / cover no-repeat;
}
.home-page .resources-section:after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  inset: 0; background: linear-gradient(0deg, #080a0c 0%, transparent 14%);
}
.home-page .resources-section > * { position: relative; z-index: 2; }
.home-page .resource-grid {
  gap: 0; border: 1px solid rgb(var(--cet-orange-rgb) / 0.302);
  background: #080a0cc9; box-shadow: 0 28px 95px #000c, 0 -16px 70px rgb(var(--cet-orange-deep-rgb) / 0.125);
  backdrop-filter: blur(12px);
}
.home-page .resource-grid article,
.home-page .resource-grid article.featured {
  background: linear-gradient(180deg, rgb(var(--cet-orange-rgb) / 0.188) 0%, #111416e6 10%, #090b0def 100%);
  border-right-color: rgb(var(--cet-orange-rgb) / 0.212);
  box-shadow: inset 0 1px rgb(var(--cet-orange-light-rgb) / 0.169);
  transition: background .45s ease, box-shadow .45s ease;
}
.home-page .resource-grid article:hover,
.home-page .resource-grid article:focus-within {
  background: linear-gradient(180deg, rgb(var(--cet-orange-light-rgb) / 0.271) 0%, #191b1be8 13%, #0b0e0fee 100%);
  box-shadow: inset 0 2px rgb(var(--cet-orange-light-rgb) / 0.549), 0 0 44px rgb(var(--cet-orange-rgb) / 0.129);
}
.home-page .resource-grid a:focus-visible { outline: 2px solid var(--cet-amber); outline-offset: 5px; }

/* The shelf lighting recedes into the final strategy room. */
.home-page .home-contact { margin-top: -1px; padding-top: 175px; }
.home-page .home-contact:before {
  background: linear-gradient(180deg, #080a0c, transparent 26%),
    radial-gradient(ellipse at 3% 83%, rgb(var(--cet-orange-rgb) / 0.18), transparent 35%),
    linear-gradient(90deg, #080a0cf2 0%, #080a0ccf 50%, #080a0c9e 100%),
    url('assets/cet-ember-hero.jpeg') center 45% / cover no-repeat;
  animation: none;
}
.home-page .home-contact:after { opacity: .4; }
.home-page .contact-portrait { box-shadow: 0 30px 85px #000c, 0 0 40px rgb(var(--cet-orange-rgb) / 0.145); }

@keyframes cet-glass { 0%, 100% { background-position: 100% 0; opacity: .42; } 50% { background-position: -80% 0; opacity: .7; } }
@keyframes cet-breathe { 50% { opacity: .55; transform: translateX(2%); } }
@keyframes cet-ember { 0% { transform: translate3d(0, 18px, 0); opacity: 0; } 25% { opacity: .35; } 80% { opacity: .18; } 100% { transform: translate3d(-18px, -94px, 0); opacity: 0; } }
@keyframes cet-object { 50% { transform: translateY(-7px); } }

/* Nearby scenes animate; distant scenes rest. */
.home-page .cet-hero-reflection, .home-page .hero .ambient-two,
.home-page .cet-chamber:before, .home-page .cet-glass-room:after,
.home-page .cet-orb img, .home-page .home-contact:after { animation-play-state: paused; }
.home-page .hero.is-ambient-active .cet-hero-reflection,
.home-page .hero.is-ambient-active .ambient-two,
.home-page .belief-system.is-ambient-active .cet-chamber:before,
.home-page .belief-system.is-ambient-active .cet-glass-room:after,
.home-page .belief-system.is-ambient-active .cet-orb img,
.home-page .home-contact.is-ambient-active:after { animation-play-state: running; }

@media (max-width: 900px) {
  .home-page .cet-orb { top: 220px; right: 3%; width: 155px; opacity: .48; }
  .home-page .resources-section { padding-top: 140px; }
  .home-page .resource-grid article,
  .home-page .resource-grid article.featured { border-right: 0; border-bottom: 1px solid rgb(var(--cet-orange-rgb) / 0.212); }
}
@media (max-width: 640px) {
  .home-page .hero:before { background: linear-gradient(0deg, #080a0c 0%, #080a0cf5 41%, #080a0c7d 65%, transparent 90%); }
  .home-page .cet-hero-reflection { inset: 75px 0 auto; height: 400px; opacity: .35; }
  .home-page .alpha-problem { margin-top: -30px; }
  .home-page .cet-wall-light { right: 9%; opacity: .4; }
  .home-page .belief-system { padding-top: 125px; }
  .home-page .belief-system > .cet-chamber { height: 660px; }
  .home-page .cet-chamber span:nth-child(n+5) { display: none; }
  .home-page .cet-glass-room { top: 620px; opacity: .58; }
  .home-page .cet-orb { top: 55px; right: 6%; width: 92px; opacity: .45; }
  .home-page .resources-section { padding-top: 130px; }
  .home-page .resources-section:before { background-position: center, center, 34% center; }
  .home-page .resource-grid article,
  .home-page .resource-grid article.featured { background: #0b0d0eea; }
  .home-page .home-contact { padding-top: 130px; }
  .home-page .home-contact:before { background-position: center, center, center, 60% center; }
}
@media (prefers-reduced-motion: reduce) {
  .home-page .cet-hero-reflection, .home-page .cet-chamber:before,
  .home-page .cet-chamber span, .home-page .cet-glass-room:after,
  .home-page .cet-orb img { animation: none !important; }
}