/* ==========================================================================
   SHOW ЕГЭ · Adaptive logo and finite lifecycle motion
   The geometry lives in templates/partials/_show_ege_logo.html.
   ========================================================================== */

@property --logo-bg {
  syntax: "<color>";
  inherits: true;
  initial-value: #050a24;
}

@property --logo-bg-deep {
  syntax: "<color>";
  inherits: true;
  initial-value: #020617;
}

@property --logo-cyan {
  syntax: "<color>";
  inherits: true;
  initial-value: #38d5ff;
}

@property --logo-violet {
  syntax: "<color>";
  inherits: true;
  initial-value: #7657ff;
}

@property --logo-magenta {
  syntax: "<color>";
  inherits: true;
  initial-value: #f33cdb;
}

@property --logo-highlight {
  syntax: "<color>";
  inherits: true;
  initial-value: #f7f4ff;
}

@property --logo-glow-opacity {
  syntax: "<number>";
  inherits: true;
  initial-value: .46;
}

:root {
  --show-ege-motion-duration: 760ms;
  --show-ege-color-duration: 580ms;
  --show-ege-motion-ease: cubic-bezier(.2, .8, .2, 1);
  --show-ege-theme-origin-x: 50vw;
  --show-ege-theme-origin-y: 50vh;
}

.logo {
  gap: 12px !important;
}

.logo__mark {
  width: 62px !important;
  height: 62px !important;
  flex: 0 0 62px !important;
  position: relative;
  display: block;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: none !important;
  box-shadow:
    0 12px 28px color-mix(in srgb, var(--logo-violet) 25%, transparent),
    0 0 0 1px color-mix(in srgb, var(--logo-highlight) 10%, transparent);
  overflow: visible !important;
  isolation: isolate;
  perspective: 520px;
  transform: translateZ(0);
}

.logo__mark::after,
.logo--fallback .logo__mark::after {
  content: none !important;
  display: none !important;
}

body.light .logo__mark,
.logo--fallback .logo__mark {
  border: 0 !important;
  background: none !important;
  box-shadow:
    0 10px 24px color-mix(in srgb, var(--logo-violet) 18%, transparent),
    0 0 0 1px color-mix(in srgb, var(--logo-highlight) 11%, transparent) !important;
}

.logo__text {
  margin-left: 3px !important;
}

.show-ege-logo {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  color-interpolation: sRGB;
  shape-rendering: geometricPrecision;
  transform: translateZ(0);
  transform-origin: 50% 50%;
  transition:
    --logo-bg var(--show-ege-color-duration) var(--show-ege-motion-ease),
    --logo-bg-deep var(--show-ege-color-duration) var(--show-ege-motion-ease),
    --logo-cyan var(--show-ege-color-duration) var(--show-ege-motion-ease),
    --logo-violet var(--show-ege-color-duration) var(--show-ege-motion-ease),
    --logo-magenta var(--show-ege-color-duration) var(--show-ege-motion-ease),
    --logo-highlight var(--show-ege-color-duration) var(--show-ege-motion-ease),
    --logo-glow-opacity var(--show-ege-color-duration) var(--show-ege-motion-ease),
    transform 180ms cubic-bezier(.2, .78, .2, 1);
}

.show-ege-logo .logo-part,
.show-ege-logo .logo-art,
.show-ege-logo .logo-laptop,
.show-ege-logo .logo-cap-group,
.show-ege-logo .logo-tassel-group,
.show-ege-logo .logo-key-row,
.show-ege-logo .logo-key {
  transform-box: fill-box;
  transform-origin: center;
}

.show-ege-logo .logo-tassel-group {
  transform-origin: 50% 0%;
}

.show-ege-logo .logo-cap-group {
  transition: transform 420ms cubic-bezier(.2, .85, .25, 1.2);
}

.show-ege-logo .logo-tassel-group {
  transition: transform 520ms cubic-bezier(.2, .85, .25, 1.15);
}

.show-ege-logo .logo-depth {
  transition: opacity 420ms ease;
}

.show-ege-logo .logo-screen-inner {
  opacity: .72;
}

body.light .show-ege-logo .logo-screen-inner {
  opacity: .82;
}

@media (hover: hover) and (pointer: fine) {
  .logo:hover .show-ege-logo .logo-cap-group {
    transform: translateY(-3px) rotate(-.55deg);
  }

  .logo:hover .show-ege-logo .logo-tassel-group {
    transform: rotate(1.4deg);
  }

  .logo:hover .show-ege-logo .logo-depth {
    opacity: .105;
  }
}

.logo:active .show-ege-logo {
  transform: scale(.965);
  transition-duration: 120ms;
}

.logo:focus-visible {
  outline: 2px solid var(--logo-cyan);
  outline-offset: 5px;
  border-radius: 16px;
}

.switch input:focus-visible + .slider {
  outline: 2px solid var(--logo-cyan);
  outline-offset: 4px;
}

/* Applied only while the controller owns finite Web Animations. */
.show-ege-logo[data-motion-active="true"],
.show-ege-intro[data-motion-active="true"] .show-ege-logo {
  will-change: transform, opacity;
}

.show-ege-logo[data-motion-active="true"] :is(
  .logo-frame,
  .logo-screen,
  .logo-screen-inner,
  .logo-deck,
  .logo-key-row,
  .logo-trackpad,
  .logo-cap-group,
  .logo-tassel-group
) {
  will-change: transform, opacity, stroke-dashoffset;
}

/* --------------------------------------------------------------------------
   Reload / first-entry / tab-return stage. It never captures input and is
   removed after every finite scene.
   -------------------------------------------------------------------------- */

.show-ege-intro {
  position: fixed;
  inset: 0;
  z-index: 2147482000;
  display: grid;
  place-items: center;
  pointer-events: none;
  contain: strict;
  overflow: hidden;
  opacity: 0;
  background:
    radial-gradient(
      circle at 50% 45%,
      color-mix(in srgb, var(--logo-violet) 24%, transparent) 0,
      color-mix(in srgb, var(--logo-cyan) 10%, transparent) 28%,
      transparent 62%
    ),
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--logo-bg) 94%, transparent),
      color-mix(in srgb, var(--logo-bg-deep) 96%, transparent)
    );
  isolation: isolate;
}

.show-ege-intro::before {
  content: "";
  position: absolute;
  inset: -18%;
  background:
    linear-gradient(
      115deg,
      transparent 32%,
      color-mix(in srgb, var(--logo-cyan) 12%, transparent) 47%,
      color-mix(in srgb, var(--logo-magenta) 10%, transparent) 53%,
      transparent 68%
    );
  transform: translate3d(-18%, 0, 0) rotate(var(--show-ege-stage-angle, 0deg));
  opacity: .18;
}

.show-ege-intro__content {
  position: relative;
  width: min(46vw, 300px);
  width: min(46vw, 52svh, 300px);
  display: grid;
  justify-items: center;
  gap: 18px;
  transform-style: preserve-3d;
}

.show-ege-intro__mark {
  width: 100%;
  aspect-ratio: 1;
  transform-origin: 50% 50%;
  filter:
    drop-shadow(0 24px 44px color-mix(in srgb, var(--logo-bg-deep) 52%, transparent))
    drop-shadow(0 0 28px color-mix(in srgb, var(--logo-violet) 24%, transparent));
}

.show-ege-intro__mark .show-ege-logo {
  width: 100%;
  height: 100%;
}

.show-ege-intro__wordmark {
  display: grid;
  justify-items: center;
  gap: 5px;
  text-align: center;
  color: var(--logo-highlight);
  text-shadow: 0 6px 24px color-mix(in srgb, var(--logo-violet) 28%, transparent);
}

.show-ege-intro__wordmark strong {
  font-size: clamp(20px, 3vw, 31px);
  line-height: 1;
  letter-spacing: .16em;
  text-indent: .16em;
}

.show-ege-intro__wordmark span {
  max-width: 34ch;
  font-size: clamp(11px, 1.3vw, 14px);
  line-height: 1.35;
  color: color-mix(in srgb, var(--logo-highlight) 72%, var(--logo-cyan));
}

.show-ege-intro--return {
  background:
    radial-gradient(
      circle at 50% 45%,
      color-mix(in srgb, var(--logo-violet) 10%, transparent),
      transparent 48%
    );
}

.show-ege-intro--return .show-ege-intro__content {
  width: min(25vw, 150px);
  width: min(25vw, 34svh, 150px);
  gap: 0;
}

.show-ege-intro--return .show-ege-intro__wordmark {
  display: none;
}

/* --------------------------------------------------------------------------
   Theme transition. Chromium uses View Transitions; the fixed wash is the
   graceful fallback and also supplies the theme-coloured light pass.
   -------------------------------------------------------------------------- */

html.show-ege-view-transition::view-transition-group(root) {
  animation-duration: var(--show-ege-motion-duration);
  animation-timing-function: var(--show-ege-motion-ease);
}

html.show-ege-view-transition::view-transition-old(root) {
  animation:
    show-ege-old-theme-out var(--show-ege-motion-duration)
    var(--show-ege-motion-ease) both;
}

html.show-ege-view-transition::view-transition-new(root) {
  clip-path: circle(0 at var(--show-ege-theme-origin-x) var(--show-ege-theme-origin-y));
  animation:
    show-ege-new-theme-reveal var(--show-ege-motion-duration)
    var(--show-ege-motion-ease) both;
}

@keyframes show-ege-old-theme-out {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: .82;
    transform: scale(1);
  }
}

@keyframes show-ege-new-theme-reveal {
  0% {
    clip-path: circle(0 at var(--show-ege-theme-origin-x) var(--show-ege-theme-origin-y));
  }
  100% {
    clip-path: circle(155vmax at var(--show-ege-theme-origin-x) var(--show-ege-theme-origin-y));
  }
}

.show-ege-theme-wash {
  position: fixed;
  inset: 0;
  z-index: 2147481900;
  pointer-events: none;
  contain: strict;
  opacity: 0;
  clip-path: circle(0 at var(--show-ege-theme-origin-x) var(--show-ege-theme-origin-y));
  background:
    radial-gradient(
      circle at var(--show-ege-theme-origin-x) var(--show-ege-theme-origin-y),
      color-mix(in srgb, var(--logo-highlight) 22%, transparent),
      color-mix(in srgb, var(--logo-cyan) 16%, transparent) 20%,
      color-mix(in srgb, var(--logo-violet) 12%, transparent) 42%,
      transparent 70%
    );
}

.show-ege-theme-ghost {
  position: fixed;
  z-index: 2147481950;
  pointer-events: none;
  transform-origin: center;
  transform-style: preserve-3d;
  contain: layout paint style;
}

.show-ege-theme-ghost .show-ege-logo {
  width: 100%;
  height: 100%;
}

.show-ege-themed-static-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 560px) {
  .logo {
    gap: 9px !important;
  }

  .logo__mark {
    width: 41px !important;
    height: 41px !important;
    flex-basis: 41px !important;
    border-radius: 11px !important;
  }

  .show-ege-intro__content {
    width: min(66vw, 250px);
    width: min(66vw, 52svh, 250px);
    gap: 14px;
  }

  .show-ege-intro--return .show-ege-intro__content {
    width: min(38vw, 145px);
    width: min(38vw, 34svh, 145px);
  }
}

@media (max-width: 380px) {
  .show-ege-intro__content {
    width: min(70vw, 220px);
    width: min(70vw, 50svh, 220px);
  }
}

@media (max-height: 420px) {
  .show-ege-intro__content {
    width: min(34vw, 188px);
    width: min(34vw, 47svh, 188px);
    gap: 8px;
  }

  .show-ege-intro__wordmark span {
    display: none;
  }

  .show-ege-intro__wordmark strong {
    font-size: clamp(16px, 5svh, 22px);
  }
}

/* Safari/mobile/low-resource mode keeps a finite branded entrance, but avoids
   the expensive large-surface glow filters and per-key raster work. */
html.perf-lite .show-ege-intro__mark {
  filter: none;
}

html.perf-lite .show-ege-logo :is(.logo-art, .logo-frame, .logo-depth) {
  filter: none;
}

html.perf-lite .show-ege-logo .logo-depth {
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  .show-ege-intro,
  .show-ege-theme-wash,
  .show-ege-theme-ghost {
    display: none !important;
  }

  .show-ege-logo,
  .show-ege-logo *,
  .logo:hover .show-ege-logo *,
  .logo:active .show-ege-logo {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

@media (forced-colors: active) {
  .logo__mark,
  body.light .logo__mark {
    box-shadow: none !important;
  }

  .logo:focus-visible,
  .switch input:focus-visible + .slider {
    outline-color: Highlight !important;
  }

  .show-ege-logo :is(.logo-art, .logo-frame, .logo-draw, .logo-key) {
    filter: none !important;
    stroke: CanvasText !important;
  }

  .show-ege-logo .logo-bg {
    fill: Canvas !important;
  }

  .show-ege-logo .logo-depth {
    display: none;
  }
}

@supports not (color: color-mix(in srgb, red, blue)) {
  .logo__mark,
  body.light .logo__mark {
    box-shadow: 0 10px 24px rgba(var(--c-acc-1-rgb), .22) !important;
  }

  .show-ege-intro {
    background: var(--logo-bg-deep);
  }
}