/* Sunrise reveal for the brand lockups (hero and closing): the logo emerges
   from the dark, gold light streaks cross it, a sheen runs over the logo itself
   and embers rise from the sun. The hero plays on load; the closing lockup when
   its section is revealed. Decorative only; the image stays the accessible
   content. Animations stop with the pause control and reduced motion
   (styles.css), and pause while a lockup is offscreen (data-idle, main.js). */
.brand-lockup { position: relative; isolation: isolate; }
.brand-lockup img { position: relative; z-index: 1; width: 100%; height: auto; }
.hero-brand { width: min(440px, 78%); margin: 0 auto 4px; }
@media (max-width: 760px) { .hero-brand { width: min(340px, 88%); margin-bottom: 0; } }
.brand-motion { position: absolute; inset: 0; pointer-events: none; }
.brand-motion > span { position: absolute; pointer-events: none; }

/* Warm light behind the sun (the sun sits at 21.7% / 41.6% of the artwork). */
.brand-bloom {
  z-index: 0;
  left: 21.7%;
  top: 41.6%;
  width: 46%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, #ffd98a52 0%, #e6bd7224 34%, #e6bd7200 68%);
}
.brand-beam {
  z-index: 0;
  inset: -30% 0;
  background: linear-gradient(115deg, transparent 30%, #e6bd720f 46%, #f3c77a1a 50%, #e6bd720f 54%, transparent 70%);
  opacity: .75;
  -webkit-mask-image: radial-gradient(closest-side, #000 45%, transparent);
  mask-image: radial-gradient(closest-side, #000 45%, transparent);
}

/* Diagonal light streaks, softened toward the edges of the lockup. */
.brand-streaks {
  z-index: 2;
  inset: -22% -8%;
  overflow: hidden;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 74%);
  mask-image: radial-gradient(ellipse at center, #000 40%, transparent 74%);
}
.brand-streaks i {
  position: absolute;
  left: -30%;
  top: 52%;
  width: 55%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #f0b25c00 12%, #f0b25c 62%, #fff6dc 93%, transparent);
  box-shadow: 0 0 14px 2px #f2a94a59;
  rotate: -24deg;
  opacity: 0;
}
.brand-streaks i:nth-child(2) { top: 34%; height: 1px; width: 42%; }
.brand-streaks i:nth-child(3) { top: 70%; width: 36%; box-shadow: 0 0 10px 1px #70d8ff40; background: linear-gradient(90deg, transparent, #70d8ff00 12%, #9fdcff 66%, #f2fbff 93%, transparent); }

/* A glint that runs over the logo's own pixels only. */
.brand-sheen {
  z-index: 2;
  inset: 0;
  overflow: hidden;
  -webkit-mask: url(/assets/atcodex-school-sunrise-lockup.png) center / 100% 100% no-repeat;
  mask: url(/assets/atcodex-school-sunrise-lockup.png) center / 100% 100% no-repeat;
}
.brand-sheen::before {
  content: '';
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: 0;
  width: 30%;
  background: linear-gradient(100deg, transparent 0, #f0b25c00 18%, #f0b25c8c 40%, #ffe3a8e6 49%, #fff8e8 50%, #ffe3a8e6 51%, #f0b25c8c 60%, transparent 82%);
  transform: translateX(-120%);
}

/* Embers rising from the sunrise. */
.brand-embers { z-index: 2; left: 5%; width: 36%; bottom: 14%; height: 72%; }
.brand-embers i {
  position: absolute;
  bottom: 0;
  left: var(--x);
  width: var(--s, 3px);
  height: var(--s, 3px);
  border-radius: 50%;
  background: #ffd27a;
  box-shadow: 0 0 6px 1px #f5b14fb3;
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  /* Hidden before its entrance only while motion is on; JavaScript reveals it. */
  body:not(.motion-paused) .js-reveal:not(.visible) .closing-brand img { opacity: 0; }
  :is(.hero-brand, .closing.visible .closing-brand) img { animation: brand-emerge 1.9s cubic-bezier(.33, 0, .2, 1) both; }
  :is(.hero-brand, .closing.visible .closing-brand) .brand-bloom { animation: brand-bloom-in 1.8s .25s cubic-bezier(.2, .65, .3, 1) both, brand-breathe 6.5s 2.1s ease-in-out infinite; }
  :is(.hero-brand, .closing.visible .closing-brand) .brand-beam { animation: brand-beam 9s ease-in-out infinite alternate; }
  :is(.hero-brand, .closing.visible .closing-brand) .brand-streaks i { animation: brand-streak 9s .15s cubic-bezier(.45, .05, .25, 1) infinite; }
  :is(.hero-brand, .closing.visible .closing-brand) .brand-streaks i:nth-child(2) { animation-delay: .5s; }
  :is(.hero-brand, .closing.visible .closing-brand) .brand-streaks i:nth-child(3) { animation-delay: .85s; }
  :is(.hero-brand, .closing.visible .closing-brand) .brand-sheen::before { animation: brand-sheen 7.5s 1.4s cubic-bezier(.45, .05, .35, 1) infinite; }
  :is(.hero-brand, .closing.visible .closing-brand) .brand-embers i { animation: brand-ember var(--t, 5s) var(--d, 0s) linear infinite; }
  .brand-lockup[data-idle] *, .brand-lockup[data-idle] *::before { animation-play-state: paused !important; }
}

@keyframes brand-emerge {
  0% { opacity: 0; filter: blur(14px) brightness(.3); transform: scale(.94) translateY(10px); }
  60% { opacity: 1; filter: blur(0) brightness(1.2); }
  100% { opacity: 1; filter: none; transform: none; }
}
@keyframes brand-bloom-in { from { opacity: 0; scale: .4; } to { opacity: 1; scale: 1; } }
@keyframes brand-breathe { 0%, 100% { opacity: 1; scale: 1; } 50% { opacity: .6; scale: .9; } }
@keyframes brand-beam { from { opacity: .35; translate: -6% 0; } to { opacity: .9; translate: 6% 0; } }
@keyframes brand-streak {
  0% { opacity: 0; transform: translateX(0); }
  2% { opacity: 1; }
  11% { opacity: 1; }
  14%, 100% { opacity: 0; transform: translateX(330%); }
}
@keyframes brand-sheen { 0% { transform: translateX(-120%); } 30%, 100% { transform: translateX(350%); } }
@keyframes brand-ember {
  0% { opacity: 0; transform: translate(0, 0) scale(.6); }
  15% { opacity: .95; }
  70% { opacity: .55; }
  100% { opacity: 0; transform: translate(var(--dx, 8px), calc(var(--rise, 110px) * -1)) scale(1); }
}

@media (forced-colors: active) { .brand-motion { display: none; } }
@media print { .brand-motion { display: none; } .brand-lockup img { opacity: 1 !important; } }