@font-face {
  font-family: "Nunito";
  src: url("../fonts/nunito-latin.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Nunito";
  src: url("../fonts/nunito-latin-ext.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@property --frame {
  syntax: "<color>";
  inherits: true;
  initial-value: #de5698;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: none; text-size-adjust: none; }
img, svg, picture { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
:where(ul[class], ol[class]) { list-style: none; padding: 0; }
a { color: inherit; }
p, h1, h2, h3 { overflow-wrap: break-word; }
[hidden]:not(.lore__slide) { display: none !important; }

:root {
  --pink: #de5698;
  --pink-deep: #c73f81;
  --cyan: #59bdd1;
  --cyan-deep: #3fa6ba;
  --ink: #191919;
  --ink-soft: #1c1c1c;
  --paper: #e9e9e9;
  --slate: #3c3c3c;
  --mist: #e6e6e6;
  --cloud: #f2f2f2;
  --white: #fff;

  --font: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --container: 1790px;
  --gutter: clamp(16px, 3.4vw, 65px);
  --nav-h: clamp(64px, 5.85vw, 112px);
  --nav-top: clamp(0px, 1.67vw, 32px);
  --section-pad: clamp(56px, 4.6vw, 88px);
  --radius: 8px;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  color-scheme: light;
  interpolate-size: allow-keywords;
  scroll-padding-top: calc(var(--nav-h) - 1px);
}

body {
  min-height: 100svh;
  font-family: var(--font);
  font-size: clamp(15px, .94vw, 18px);
  line-height: 1.5;
  color: var(--ink);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

strong { font-weight: 700; }

:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
}

[data-input="pointer"] :focus-visible { outline: none; }

a, button { -webkit-tap-highlight-color: transparent; }

::selection { background: var(--pink); color: var(--white); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

.section {
  position: relative;
  padding: var(--section-pad) var(--gutter);
}

.section--light {
  background: var(--paper) url("../img/dot-grid.webp") 0 0 / 672px 672px;
}

.section--dark {
  background: var(--ink);
  color: var(--white);
}

.section__head {
  display: grid;
  justify-items: center;
  gap: clamp(24px, 2.4vw, 46px);
  margin-bottom: clamp(36px, 2.4vw, 46px);
  text-align: center;
}

.section__title {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: .15em;
  font-size: clamp(32px, 2.5vw, 48px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.01em;

  &::before,
  &::after {
    content: "";
    flex: none;
    width: .98em;
    height: 1.19em;
    margin-bottom: -.04em;
    background: currentColor;
    mask: url("../img/wing-left.svg") center / contain no-repeat;
  }

  &::after { mask-image: url("../img/wing-right.svg"); }
}

.section__intro {
  max-width: 875px;
  line-height: 1.48;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  padding: 10px 18px;
  border-radius: var(--radius);
  background: var(--pink);
  color: var(--white);
  font-weight: 700;
  text-decoration: none;
  translate: 0 -200%;
  transition: translate .3s var(--ease-out);

  &:focus-visible { translate: 0; }
}

.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .6em 1.9em;
  border-radius: 6px;
  background: var(--pink);
  color: var(--white);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: background-color .3s, translate .3s var(--ease-out), box-shadow .3s;

  &::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / .35) 50%, transparent 70%);
    translate: -110% 0;
    transition: translate .7s var(--ease-out);
  }

  &:hover {
    background: var(--pink-deep);
    translate: 0 -2px;
    box-shadow: 0 10px 24px -10px rgb(222 86 152 / .8);

    &::after { translate: 110% 0; }
  }

  &:active { translate: 0; }
}

.button--xl {
  min-width: min(450px, 100%);
  min-height: clamp(56px, 4.2vw, 81px);
  font-size: clamp(20px, 1.56vw, 30px);
}

.button--block {
  display: flex;
  width: 100%;
  min-height: clamp(50px, 3.2vw, 61px);
  border-radius: 20px;
  font-size: clamp(18px, 1.25vw, 24px);
}

.header {
  position: fixed;
  z-index: 50;
  inset: var(--nav-top) 0 auto;
  transition: inset .4s var(--ease-out);

  &.is-scrolled { inset-block-start: 0; }
}

.nav {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--nav-h);
  padding-inline: var(--gutter);
  border-block: 1px solid rgb(255 255 255 / .45);
  background: rgb(25 25 25 / .5);
  backdrop-filter: blur(6px);
  color: var(--white);
  transition: background-color .4s, border-color .4s;

  .is-scrolled & {
    background: rgb(25 25 25 / .88);
    border-top-color: transparent;
  }
}

.nav__brand {
  grid-column: 2;
  grid-row: 1;
  width: clamp(170px, 16.5vw, 316px);
  padding-inline: clamp(20px, 2.4vw, 46px);
  box-sizing: content-box;
  transition: scale .4s var(--ease-spring);

  &:hover { scale: 1.04; }
  img { width: 100%; height: auto; }
}

.nav__menu { display: contents; }

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(18px, 1.9vw, 40px);
  grid-row: 1;
}

.nav__list--start { grid-column: 1; justify-content: end; }
.nav__list--end { grid-column: 3; justify-content: start; }

.nav__link {
  --arrow: calc(var(--nav-h) / 2 + 1px);
  position: relative;
  display: block;
  padding-block: 6px;
  font-size: clamp(15px, .94vw, 18px);
  text-decoration: none;
  white-space: nowrap;
  transition: color .25s;

  &::before,
  &::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 20px;
    height: 10px;
    background: var(--white);
    opacity: 0;
    transition: opacity .3s, translate .4s var(--ease-out);
  }

  &::before {
    top: calc(50% - var(--arrow));
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    translate: -50% -8px;
  }

  &::after {
    bottom: calc(50% - var(--arrow));
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    translate: -50% 8px;
  }

  &:hover { color: var(--cyan); }

  &[aria-current="true"] {
    &::before, &::after { opacity: 1; translate: -50% 0; }
  }
}

.nav__link--cta {
  padding: .6em 1.05em;
  border-radius: 4px;
  background: var(--pink);
  transition: background-color .25s;

  &::before, &::after { display: none; }
  &:hover, &[aria-current="true"] { color: var(--white); background: var(--cyan); }
}

.nav__burger {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background: var(--pink);
}

.nav__burger-bars,
.nav__burger-bars::before,
.nav__burger-bars::after {
  position: absolute;
  left: 11px;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--white);
  transition: translate .3s var(--ease-out), rotate .3s var(--ease-out), opacity .2s;
}

.nav__burger-bars { top: 21px; }
.nav__burger-bars::before, .nav__burger-bars::after { content: ""; left: 0; }
.nav__burger-bars::before { translate: 0 -7px; }
.nav__burger-bars::after { translate: 0 7px; }

.nav__burger[aria-expanded="true"] .nav__burger-bars {
  background: transparent;

  &::before { translate: 0; rotate: 45deg; }
  &::after { translate: 0; rotate: -45deg; }
}

@media (max-width: 1280px) {
  .nav {
    grid-template-columns: auto 1fr auto;
    padding-inline: 16px;
    background: rgb(25 25 25 / .85);
    backdrop-filter: none;
  }

  .nav__brand {
    grid-column: 1;
    width: 150px;
    padding: 0;
  }

  .nav__burger { display: block; grid-column: 3; }

  .nav__menu {
    position: fixed;
    inset: 0;
    z-index: -1;
    display: grid;
    place-content: center;
    gap: 12px;
    padding: calc(var(--nav-h) + 24px) 24px 40px;
    background: rgb(25 25 25 / .96);
    backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s, visibility .35s;

    &.is-open { opacity: 1; visibility: visible; }
  }

  .nav__list {
    grid-area: auto;
    flex-direction: column;
    gap: 12px;
  }

  .nav__link {
    font-size: 24px;
    font-weight: 700;

    &::before, &::after { display: none; }
    &[aria-current="true"] { color: var(--cyan); }
  }

  .nav__link--cta { margin-top: 12px; font-size: 20px; }

  .nav__menu.is-open .nav__list > li {
    animation: nav-in .5s var(--ease-out) backwards;
  }

  .nav__menu.is-open .nav__list > li:nth-child(2) { animation-delay: 40ms; }
  .nav__menu.is-open .nav__list > li:nth-child(3) { animation-delay: 80ms; }
  .nav__menu.is-open .nav__list > li:nth-child(4) { animation-delay: 120ms; }
  .nav__menu.is-open .nav__list--end > li { animation-delay: 160ms; }
}

@keyframes nav-in {
  from { opacity: 0; translate: 0 16px; }
}

.socials {
  position: fixed;
  z-index: 40;
  left: 14px;
  bottom: 16px;
  display: grid;
  gap: 16px;
}

.socials__link {
  display: grid;
  place-items: center;
  width: 45px;
  height: 45px;
  border-radius: var(--radius);
  background: var(--pink);
  color: var(--white);
  transition: background-color .25s, scale .3s var(--ease-spring);

  svg { width: 24px; height: 24px; fill: currentColor; }
  &:hover { background: var(--cyan); scale: 1.08; }
}

:is(.socials__link, .to-top).is-inverted:not(:hover) { background: var(--ink); }

.to-top {
  position: fixed;
  z-index: 40;
  right: 21px;
  bottom: 17px;
  display: grid;
  place-items: center;
  width: clamp(48px, 3.55vw, 68px);
  aspect-ratio: 1;
  border-radius: var(--radius);
  background: var(--pink);
  color: var(--white);
  opacity: 0;
  visibility: hidden;
  translate: 0 20px;
  transition: opacity .35s, visibility .35s, translate .35s var(--ease-out), background-color .25s;

  svg { width: 50%; height: 50%; fill: currentColor; transition: translate .3s var(--ease-out); }
  &.is-visible { opacity: 1; visibility: visible; translate: 0; }
  &:hover { background: var(--cyan); }
  &:hover svg { translate: 0 -3px; }
}

@media (max-width: 1440px) {
  .socials { display: none; }
}

.like {
  position: absolute;
  z-index: 3;
  top: 12px;
  left: 10px;
  display: grid;
  justify-items: center;
  gap: 1px;
  width: 44px;
  color: var(--cyan);
  -webkit-tap-highlight-color: transparent;
}

.like__icon {
  width: 44px;
  height: 20px;
  overflow: visible;
  transition: scale .3s var(--ease-spring);
}

.like__count {
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.like:hover .like__icon { scale: 1.12; }

.like[aria-pressed="true"] { --heart-fill: var(--white); }

.like.is-bumping .like__icon { animation: heart-beat .45s var(--ease-out); }

.like__burst {
  position: absolute;
  top: 0;
  left: 50%;
  color: var(--pink);
  font-size: 12px;
  font-weight: 800;
  pointer-events: none;
  animation: burst .8s var(--ease-out) forwards;
}

@keyframes heart-beat {
  30% { scale: 1.35; }
  60% { scale: .92; }
}

@keyframes burst {
  from { opacity: 1; translate: -50% 0; }
  to { opacity: 0; translate: -50% -26px; }
}

.modal {
  width: min(760px, calc(100% - 32px));
  max-height: min(86svh, 900px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: var(--cloud);
  color: var(--ink);
  box-shadow: 0 30px 80px -20px rgb(0 0 0 / .6);
  overflow: hidden;
  opacity: 0;
  scale: .94;
  transition: opacity .3s, scale .35s var(--ease-out), display .35s allow-discrete, overlay .35s allow-discrete;

  &[open] {
    opacity: 1;
    scale: 1;

    @starting-style { opacity: 0; scale: .94; }
  }

  &::backdrop {
    background: rgb(25 25 25 / 0);
    backdrop-filter: blur(0);
    transition: background-color .3s, backdrop-filter .3s, display .35s allow-discrete, overlay .35s allow-discrete;
  }

  &[open]::backdrop {
    background: rgb(25 25 25 / .7);
    backdrop-filter: blur(4px);

    @starting-style { background: rgb(25 25 25 / 0); backdrop-filter: blur(0); }
  }
}

.modal__box {
  position: relative;
  max-height: inherit;
  padding: clamp(28px, 4vw, 56px);
  border-top: 6px solid var(--pink);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--pink);
  color: var(--white);
  transition: background-color .25s, rotate .4s var(--ease-out);

  svg { width: 20px; height: 20px; fill: currentColor; }
  &:hover { background: var(--cyan); rotate: 90deg; }
}

.modal__title {
  margin-bottom: 24px;
  padding-right: 48px;
  font-size: clamp(26px, 2vw, 34px);
}

.modal__content {
  display: grid;
  gap: 10px;
  font-size: 16px;

  h3 {
    margin-top: 14px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--cyan);
    font-size: 18px;
  }
}

.hero {
  position: relative;
  height: 100svh;
  min-height: 580px;
  max-height: 1200px;
  overflow: clip;
  container-type: size;
  background: #6d5a6b;
  color: var(--white);

  &::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -20.1cqh;
    height: 40.2cqh;
    border-radius: 50%;
    background: rgb(25 25 25 / .76);
  }
}

.hero__stage,
.team__stage {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: max(100cqw, 100cqh * var(--ratio));
  aspect-ratio: var(--ratio);
}

.hero__stage { --ratio: 1920 / 1080; }
.team__stage { --ratio: 1920 / 1063; }

.hero__layer,
.team__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: translate;
  translate:
    calc(var(--mx, 0) * var(--depth, 0) * 1px)
    calc(var(--p, 0) * var(--speed, 0) * 50vh + var(--my, 0) * var(--depth, 0) * 1px);
}

.hero__layer--bg,
.team__layer:first-child { scale: 1.3; }

.hero__layer--characters { scale: 1.08; }
.team__layer:last-child { scale: 1.28; }

.hero__smoke {
  position: absolute;
  left: 40.1%;
  top: 42.7%;
  width: 16%;
  height: auto;
  mix-blend-mode: screen;
  transform-origin: 50% 100%;
  translate:
    calc(var(--mx, 0) * -55px)
    calc(var(--p, 0) * .2 * 50vh + var(--my, 0) * -55px);
  animation: smoke 7s ease-in-out infinite;
}

@keyframes smoke {
  0%, 100% { opacity: .85; transform: translateY(0) scale(1, 1) skewX(0); }
  35% { opacity: 1; transform: translateY(-3%) scale(1.04, 1.06) skewX(-4deg); }
  70% { opacity: .6; transform: translateY(-6%) scale(.96, 1.1) skewX(3deg); }
}

.hero__content {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: clamp(24px, 4.7cqh, 51px);
  display: grid;
  justify-items: center;
  gap: clamp(28px, 6.5cqh, 71px);
  width: min(875px, 100% - 2 * var(--gutter));
  translate: -50% 0;
  text-align: center;
  animation: rise 1s .2s var(--ease-out) backwards;
}

.hero__intro {
  text-wrap: balance;
  text-shadow: 0 1px 12px rgb(0 0 0 / .4);
}

@keyframes rise {
  from { opacity: 0; translate: -50% 40px; }
}

.stats {
  padding: clamp(36px, 2.6vw, 50px) var(--gutter);
  background: var(--ink-soft);
  color: var(--white);
}

.stats__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(24px, 3vw, 58px) clamp(40px, 8.8vw, 170px);
}

.stat {
  display: grid;
  justify-items: center;
  gap: clamp(14px, 1.5vw, 29px);
  text-decoration: none;

  &:hover .stat__icon { translate: 0 -6px; filter: drop-shadow(0 8px 12px rgb(89 189 209 / .45)); }
}

.stat__icon {
  width: clamp(40px, 3.1vw, 60px);
  height: clamp(40px, 3.1vw, 60px);
  fill: url("#g-social");
  transition: translate .35s var(--ease-spring), filter .35s;
}

.stat__icon--wide { width: clamp(52px, 4.2vw, 82px); }

@media (max-width: 480px) {
  .stats__list { gap: 20px 22px; }
  .stat__icon { width: 34px; height: 34px; }
  .stat__icon--wide { width: 44px; }
  .stat__value { font-size: 18px; }
}

.stat__value {
  font-size: clamp(22px, 1.56vw, 30px);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.models { padding-inline: 0; padding-bottom: clamp(48px, 3.7vw, 71px); }
.models .section__head { padding-inline: var(--gutter); }

.carousel {
  --visible: 6;
  --card-gap: clamp(22px, 2.9vw, 55px);
  --edge: 20px;
  position: relative;
  width: min(100% - 2 * var(--gutter) + 2 * var(--edge), var(--container));
  margin-inline: auto;
}

.carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--visible) - 1) * var(--card-gap)) / var(--visible));
  gap: var(--card-gap);
  padding: 24px var(--edge) 28px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--edge);
  scrollbar-width: none;
  isolation: isolate;
  cursor: grab;

  &::-webkit-scrollbar { display: none; }
  &.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
  &.is-dragging a, &.is-dragging button { pointer-events: none; }
}

.carousel__controls {
  margin-top: clamp(28px, 2.6vw, 50px);
  padding-inline: var(--edge);
}

.carousel__bar {
  position: relative;
  height: 11px;
  border-radius: 6px;
  background: var(--white);
  cursor: pointer;
  touch-action: none;
}

.carousel__thumb {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: var(--thumb-w, 20%);
  border-radius: inherit;
  background: var(--pink);
  translate: var(--thumb-x, 0) 0;
  cursor: grab;
  transition: background-color .25s;

  &:hover { background: var(--pink-deep); }
}

@media (max-width: 1600px) { .carousel { --visible: 5; } }
@media (max-width: 1300px) { .carousel { --visible: 4; } }
@media (max-width: 1024px) { .carousel { --visible: 3; } }
@media (max-width: 768px) { .carousel { --visible: 2; } }
@media (max-width: 520px) { .carousel { --visible: 1.3; } }

.model-card {
  --frame: var(--pink);
  position: relative;
  top: 0;
  aspect-ratio: 248 / 441;
  scroll-snap-align: start;
  border-radius: 0 39.1% 0 0 / 0 22% 0 0;
  background: var(--slate) url("../img/card-pattern.svg") 0 0 / 320px 560px;
  color: var(--white);
  transition: --frame .5s, top .4s var(--ease-out);

  &::before {
    content: "";
    position: absolute;
    top: -1.59%;
    left: -6.33%;
    z-index: -1;
    width: 110.5%;
    height: 103.15%;
    background: url("../img/card-shadow.svg") 0 0 / 100% 100% no-repeat;
    transition: translate .5s var(--ease-out);
  }

  &::after {
    content: "";
    position: absolute;
    inset: 3px;
    z-index: 2;
    border: 2px solid var(--frame);
    border-radius: 0 40.6% 0 0 / 0 22.5% 0 0;
    pointer-events: none;
  }

  &:hover {
    top: -6px;
    &::before { translate: 4px 6px; }
  }

  &.is-flipped { --frame: var(--cyan); }
}

.js .model-card { cursor: pointer; }

.model-card__toggle {
  position: absolute;
  z-index: 3;
  top: 89px;
  left: 0;
  display: grid;
  width: 32px;
  height: 74px;
  border-radius: 0 10px 10px 0;
  background: var(--frame);
  color: var(--white);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .03em;
  transition: width .3s var(--ease-out);

  > span {
    grid-area: 1 / 1;
    place-self: center;
    writing-mode: vertical-rl;
    transition: opacity .3s;
  }

  &:hover { width: 38px; }
}

.model-card__toggle-back,
.is-flipped .model-card__toggle-front { opacity: 0; }

.is-flipped .model-card__toggle-back { opacity: 1; }

.model-card__stage {
  position: absolute;
  inset: 44px 18px 40px 38px;
  display: grid;
  grid-template: 100% / 100%;
  transition: scale .8s cubic-bezier(.45, 0, .2, 1);
}

.is-flipped .model-card__stage {
  scale: -1 1;
}

.model-card__model,
.model-card__credits {
  grid-area: 1 / 1;
}

.model-card__model {
  transition: opacity .3s ease .35s;
}

.model-card__credits {
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility 0s linear .25s;
}

.is-flipped .model-card__model {
  opacity: 0;
  transition: opacity .25s ease;
}

.is-flipped .model-card__credits {
  opacity: 1;
  visibility: visible;
  transition: opacity .3s ease .35s, visibility 0s linear .35s;
}

.model-card__model {
  place-self: center;
  width: auto;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.model-card__credits {
  align-self: center;
  display: grid;
  gap: 16px;
  padding-right: 4px;
  scale: -1 1;
  text-align: left;

  &::before {
    content: "Crédits";
    padding-bottom: 10px;
    border-bottom: 2px solid var(--pink);
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.01em;
  }

  > div {
    position: relative;
    display: grid;
    justify-items: start;
    gap: 6px;
    padding-left: 16px;
    border-left: 2px solid rgb(89 189 209 / .3);

    &::before {
      content: "";
      position: absolute;
      top: 3px;
      left: -6px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--cyan);
      box-shadow: 0 0 0 3px var(--slate), 0 0 12px rgb(89 189 209 / .8);
    }
  }

  dt {
    color: var(--cyan);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: .14em;
    text-transform: uppercase;
  }

  dd { margin: 0; }

  a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    padding: 5px 10px 5px 12px;
    border: 1px solid rgb(255 255 255 / .16);
    border-radius: 0 12px 0 0;
    background: rgb(255 255 255 / .07);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color .25s, border-color .25s, translate .3s var(--ease-out);

    &:hover {
      border-color: var(--pink);
      background: var(--pink);
      translate: 3px 0;
    }
  }

  svg { flex: none; width: 14px; height: 14px; fill: currentColor; }
}

.is-flipped .model-card__credits {
  &::before { animation: credit-in .5s var(--ease-out) .35s backwards; }
  > div { animation: credit-in .5s var(--ease-out) backwards; }
  > div:nth-child(1) { animation-delay: .42s; }
  > div:nth-child(2) { animation-delay: .5s; }
  > div:nth-child(3) { animation-delay: .58s; }
  > div:nth-child(4) { animation-delay: .66s; }
}

@keyframes credit-in {
  from { opacity: 0; translate: -14px 0; }
}

.model-card.is-flipped {
  background:
    radial-gradient(90% 60% at 80% 10%, rgb(89 189 209 / .18), transparent 70%),
    var(--slate) url("../img/card-pattern.svg") 0 0 / 320px 560px;
}

.model-card__meta {
  position: absolute;
  z-index: 1;
  inset: auto 1px 11px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  height: 17px;
  padding-left: 10px;
  background: #ddd;
  color: var(--cyan);
  font-size: 13.5px;
  line-height: 17px;

  time { line-height: 17px; }
}

.model-card__type {
  position: relative;
  display: grid;
  align-items: end;
  justify-items: end;
  width: 58px;
  height: 60px;
  margin-bottom: -9px;
  padding: 0 8px 7px 0;
  background: var(--cyan);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.lore {
  --tabs-x: 72%;
  position: relative;
  display: grid;
  height: clamp(640px, 49vw, 942px);
  border-block: clamp(10px, 1.4vw, 27px) solid var(--cyan);
  background: #f1ddd6;
  overflow: clip;

  &[data-active="koubai"] { --tabs-x: 18.7%; }
}

.lore__title {
  position: absolute;
  z-index: 3;
  top: clamp(28px, 4.2vw, 80px);
  left: 50%;
  translate: -50% 0;
}

.lore__slides {
  display: grid;
  height: 100%;
}

.lore__slide {
  position: relative;
  grid-area: 1 / 1;
  height: 100%;
  overflow: clip;
  opacity: 1;
  transition: opacity .7s var(--ease-out), display .7s allow-discrete;

  &[hidden] {
    display: none;
    opacity: 0;
  }

  @starting-style { opacity: 0; }
}

.lore__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  scale: 1.12;
  translate: calc(var(--mx, 0) * -40px) 0;
  will-change: translate;
}

.lore__character {
  position: absolute;
  z-index: 1;
  height: auto;
  transition: opacity 1s;

  @starting-style { opacity: 0; }
}

.lore__slide--melibellule .lore__character {
  left: 0;
  bottom: 0;
  width: 66.5%;
  max-height: 92%;
  object-fit: contain;
  object-position: left bottom;

  @starting-style { opacity: 0; }
}

.lore__slide--koubai .lore__character {
  left: 39.6%;
  top: 4.4%;
  width: 49.7%;

  @starting-style { opacity: 0; }
}

.lore__text {
  position: absolute;
  z-index: 2;
  top: 58.6%;
  display: grid;
  gap: 1.25em;
  width: max(380px, 31.25%);
  padding: clamp(24px, 1.9vw, 36px);
  translate: 0 -50%;
  background: rgb(255 255 255 / .42);
  backdrop-filter: blur(8px) saturate(1.2);
  color: #000;
  line-height: 1.55;
}

.lore__slide--melibellule .lore__text { left: 50%; }

.lore__slide--koubai .lore__text {
  left: 18.85%;
  width: max(380px, 34.2%);
  top: 51.6%;
}

.lore__tabs {
  position: absolute;
  z-index: 4;
  left: var(--tabs-x);
  top: 85%;
  display: flex;
  gap: 11px;
  transition: left .8s var(--ease-out);
}

.lore__tab {
  width: clamp(64px, 4.27vw, 82px);
  aspect-ratio: 1;
  border: 4px solid var(--white);
  border-radius: 50%;
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 6px 16px -6px rgb(0 0 0 / .45);
  transition: border-color .3s, scale .35s var(--ease-spring);

  img { width: 100%; height: 100%; object-fit: cover; }
  &:hover { scale: 1.08; }
  &[aria-selected="true"] { border-color: var(--pink); }
}

.credits { padding-bottom: clamp(110px, 9.3vw, 178px); }

.credits__grid {
  --cols: 6;
  --offset: 76px;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: 51px clamp(24px, 2.6vw, 50px);
  max-width: var(--container);
  margin-inline: auto;
  padding-top: clamp(40px, 3.8vw, 72px);

  > :nth-child(2n) { translate: 0 var(--offset); }
}

.credit {
  aspect-ratio: 259 / 430;
  container-type: inline-size;
}

.credit__link {
  position: relative;
  display: block;
  height: 100%;
  text-decoration: none;
}

.credit__media {
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: var(--white);
  transition: height .6s var(--ease-out);

  img,
  video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 30% 50%;
    transition: scale .8s var(--ease-out);
  }
}

.credit__body {
  position: absolute;
  inset: calc(52.3% + 15px) 0 auto;
  display: grid;
  gap: 10px;
  opacity: 0;
  translate: 0 16px;
  transition: opacity .35s, translate .5s var(--ease-out);
}

.credit__tags {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(6px, 4.6cqi, 12px);
  font-size: clamp(10px, 4.8cqi, 12px);

  li {
    min-width: min(89px, 34cqi);
    padding: 4px clamp(8px, 4.6cqi, 12px);
    border-radius: 3px;
    background: #343434;
    text-align: center;
    line-height: 1.4;
  }
}

.credit__name {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
  font-size: clamp(15px, 9cqi, 24px);
  line-height: 1.2;

  svg { width: 26px; height: 26px; fill: currentColor; transition: translate .3s var(--ease-out); }
}

.credit__text {
  display: -webkit-box;
  overflow: hidden;
  color: #7c7c7c;
  font-size: clamp(12px, 6.6cqi, 18px);
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.credit__link:is(:hover, :focus-visible) {
  .credit__media { height: 52.3%; }
  .credit__media :is(img, video) { scale: 1.06; }
  .credit__body { opacity: 1; translate: 0; transition-delay: .12s; }
  .credit__name svg { translate: 3px -3px; color: var(--pink); }
}

@media (hover: none) {
  .credit__media { height: 52.3%; }
  .credit__body { opacity: 1; translate: 0; }
}

@media (min-width: 1700px) {
  .credits__grid { --cols: 8; max-width: 2300px; }
}

@media (max-width: 1440px) {
  .credits__grid { --cols: 4; }
}

@media (max-width: 900px) {
  .credits__grid { --cols: 2; --offset: 48px; }
}

@media (max-width: 480px) {
  .credits__grid { gap: 32px 16px; }
  .credit__tags li { min-width: 0; }
  .credit__text { font-size: 14px; }
}

.team {
  position: relative;
  height: clamp(620px, 55.4vw, 1063px);
  overflow: clip;
  container-type: size;
  background: #87b8d9;
  --circle: clamp(92px, 14.43cqw, 277px);
  color: var(--white);

  &::after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    bottom: -20.4cqh;
    height: 40.8cqh;
    border-radius: 50%;
    background: rgb(25 25 25 / .76);
  }
}

.team__list {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 3.5cqh;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: clamp(20px, 11.6cqw, 223px);
  width: max-content;
  translate: -50% 0;

  > li:nth-child(2n) { translate: 0 calc(var(--circle) * -.21); }
}

.member {
  display: grid;
  justify-items: center;
  gap: clamp(12px, 1.7cqw, 33px);
  color: var(--white);
  -webkit-tap-highlight-color: transparent;
}

.member__circle {
  position: relative;
  width: var(--circle);
  aspect-ratio: 1;
  border: clamp(3px, .26cqw, 5px) solid var(--cyan);
  border-radius: 50%;
  background: rgb(229 229 229 / .8);
  transition: border-color .3s, box-shadow .4s;
}

.member__portrait {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  max-width: none;
  height: auto;
  transform-origin: 50% 100%;
  transition: scale .5s var(--ease-spring);
}

.member__name {
  font-size: clamp(18px, 1.56cqw, 30px);
  line-height: 1;

  &::first-letter { color: var(--cyan); transition: color .3s; }
}

.member:hover,
.member[aria-expanded="true"] {
  .member__circle { border-color: var(--pink); box-shadow: 0 0 0 8px rgb(222 86 152 / .18); }
  .member__portrait { scale: 1.06; }
  .member__name::first-letter { color: var(--pink); }
}

.team__panel {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 50%;
  width: min(1570px, 100% - 2 * var(--gutter));
  translate: -50% calc(-100% - 70px);
  color: var(--ink);
  transition: translate .7s var(--ease-out), visibility .7s;
  visibility: hidden;

  &.is-open { translate: -50% 0; visibility: visible; }
}

.team__panel-inner {
  max-height: calc(100cqh - var(--circle, 277px) - 140px);
  min-height: 200px;
  padding: clamp(84px, 6vw, 110px) clamp(20px, 9vw, 172px) clamp(56px, 3.6vw, 70px);
  border: 2px solid var(--pink);
  border-top: 0;
  border-radius: 0 0 40px 40px;
  background: rgb(229 229 229 / .9);
  backdrop-filter: blur(10px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.team__bio {
  display: grid;
  gap: 1.1em;
  animation: fade-up .5s var(--ease-out);

  h3 {
    margin-bottom: .4em;
    padding-bottom: .8em;
    border-bottom: 1px solid var(--cyan);
    font-size: clamp(22px, 1.56vw, 30px);
    line-height: 1;
  }
}

@keyframes fade-up {
  from { opacity: 0; translate: 0 12px; }
}

.team__close {
  position: absolute;
  left: 50%;
  bottom: -60px;
  display: grid;
  place-items: end center;
  width: 121px;
  height: 121px;
  padding-bottom: 14px;
  border: 2px solid var(--pink);
  border-radius: 50%;
  background: rgb(229 229 229 / .9);
  backdrop-filter: blur(10px);
  color: var(--pink);
  clip-path: inset(calc(50% - 1px) -4px -4px -4px);
  translate: -50% 0;

  svg { width: 34px; height: 34px; fill: currentColor; transition: translate .3s var(--ease-out); }
  &:hover svg { translate: 0 -4px; }
}

.setup { padding-bottom: clamp(56px, 4.1vw, 79px); }

.setup__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 326px));
  justify-content: center;
  gap: clamp(32px, 5.1vw, 98px);
}

.gear {
  min-height: 561px;
  border: 2px solid var(--cyan);
  border-radius: 20px;
  background: var(--white);
  color: #070707;
  overflow: hidden;
  transition: translate .4s var(--ease-out), box-shadow .4s;

  &:hover {
    translate: 0 -8px;
    box-shadow: 0 22px 40px -18px rgb(89 189 209 / .55);
  }
}

.gear__title {
  height: 91px;
  padding-top: 16px;
  background: var(--cyan);
  clip-path: polygon(0 0, 100% 0, 100% 81px, 0 46px, 0 54px, 100% 89px, 100% 91px, 0 56px);
  color: var(--white);
  font-size: clamp(24px, 1.56vw, 30px);
  line-height: 1;
  text-align: center;
}

.gear__list {
  padding: 30px 22px 40px;

  li {
    padding: 5px 0 4px;
    border-bottom: 1px solid var(--cyan);
    line-height: 1.5;

    &:last-child { border-bottom: 0; }
  }
}

.shop {
  container-type: inline-size;
  display: grid;
  justify-items: center;
  padding-bottom: clamp(40px, 2.9vw, 55px);
  overflow: clip;
}

.shop__stage {
  --stage-w: min(1302px, 100cqw);
  position: relative;
  z-index: 0;
  width: var(--stage-w);
  aspect-ratio: 1302 / 811;
  margin-top: calc(var(--stage-w) * -.036);
  margin-bottom: calc(var(--stage-w) * -.167);
  pointer-events: none;
}

.shop .section__title { position: relative; z-index: 1; }

.shop__layer {
  position: absolute;
  height: auto;
  will-change: translate;
  translate:
    calc(var(--mx, 0) * var(--depth, 0) * 1px)
    calc(var(--my, 0) * var(--depth, 0) * 1px + var(--p, 0) * var(--depth, 0) * 2px);
}

.shop__layer--fx { inset: 0; width: 100%; }
.shop__layer--tapis { left: 49%; top: 20.2%; width: 31.1%; rotate: 0deg; animation: float 7s ease-in-out infinite; }
.shop__layer--tshirt { left: 17.8%; top: 20.2%; width: 22.6%; animation: float 6s -2s ease-in-out infinite; }
.shop__layer--mug { left: 34.3%; top: 36.6%; width: 21.4%; animation: float 5s -1s ease-in-out infinite; }

@keyframes float {
  50% { transform: translateY(-2.5%) rotate(-1deg); }
}

.shop .button {
  position: relative;
  z-index: 1;
  max-width: 1053px;
}

.bplace {
  position: relative;
  display: block;
  height: clamp(96px, 11.35vw, 218px);
  background: #000;
  color: var(--white);
  text-decoration: none;
  overflow: clip;
  container-type: inline-size;
}

.bplace__word {
  position: absolute;
  top: 50%;
  left: 13.65%;
  font-size: min(5.57cqw, 107px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .05em;
  white-space: nowrap;
  translate: 0 -48%;

  i { font-style: normal; color: var(--cyan); transition: color .3s; }
}

.bplace__word--outline {
  z-index: 2;
  color: transparent;
  -webkit-text-stroke: 2px var(--white);
  paint-order: stroke fill;

  i { color: transparent; -webkit-text-stroke-color: var(--cyan); }
}

.bplace__media {
  position: absolute;
  z-index: 1;
  top: 3.7%;
  bottom: 2.8%;
  left: 28.28%;
  width: 47.9%;
  clip-path: polygon(8.37% 0, 90.43% 0, 82.2% 100%, 85.66% 100%, 93.48% 0, 99.78% 0, 91.97% 100%, 0.13% 100%);
  background: #000;

img {
  position: absolute;
  top: -8%;
  left: -.87%;
  width: 108.26%;
  max-width: none;
  height: auto;
  opacity: .7;
  transition: scale .8s var(--ease-out), opacity .4s;
}
}

.bplace__arrows {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 76.56%;
  font-size: min(7.8cqw, 150px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.08em;
  translate: 0 -54%;
  transition: translate .45s var(--ease-out);

  i { font-style: normal; color: var(--cyan); transition: color .3s; }
}

.bplace:is(:hover, :focus-visible) {
  .bplace__word i, .bplace__arrows i { color: var(--pink); }
  .bplace__word--outline i { color: transparent; -webkit-text-stroke-color: var(--pink); }
  .bplace__media img { scale: 1.08; opacity: .85; }
  .bplace__arrows { translate: 14px -54%; }
}

.bplace:focus-visible { outline-offset: -6px; }

.contact {
  background: var(--pink);
  color: var(--white);
  padding-bottom: clamp(64px, 6vw, 115px);

  .section__title { margin-bottom: clamp(32px, 2.6vw, 49px); }
}

.contact__form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 1.25vw, 24px) clamp(20px, 1.8vw, 34px);
  max-width: 1355px;
  margin-inline: auto;
  padding: clamp(28px, 3.2vw, 61px) clamp(20px, 3.85vw, 74px) clamp(28px, 2.76vw, 53px);
  background: var(--cloud);
  color: var(--ink);
}

.field {
  display: grid;
  align-content: start;
  gap: 10px;
}

.field--message {
  grid-row: span 2;
  grid-template-rows: auto 1fr;
}

.field--trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.field__label {
  padding-left: 4px;
  line-height: 1.1;
}

.field__input {
  width: 100%;
  min-height: clamp(50px, 3vw, 58px);
  padding: 0 24px;
  border: 2px solid var(--white);
  border-radius: 29px;
  background: var(--mist);
  color: var(--ink);
  transition: border-color .25s, background-color .25s, box-shadow .25s;

  &::placeholder { color: #242424; opacity: 1; }

  &:hover { border-color: #fafafa; background: #e1e1e1; }

  &:focus {
    outline: none;
    border-color: var(--cyan);
    background: var(--white);
    box-shadow: 0 0 0 4px rgb(89 189 209 / .25);
  }

  &:user-invalid { border-color: var(--pink); }
}

textarea.field__input {
  min-height: 168px;
  height: 100%;
  padding-block: 18px;
  resize: vertical;
  line-height: 1.5;
}

.contact__submit {
  grid-column: 1 / -1;
  margin-top: clamp(4px, 1.1vw, 21px);
  border: 2px solid var(--white);
  border-radius: 29px;
  cursor: pointer;

  &:disabled { opacity: .6; cursor: progress; }
}

.contact__status {
  grid-column: 1 / -1;
  min-height: 1.5em;
  text-align: center;
  font-weight: 700;

  &:empty { display: none; }
  &.is-success { color: var(--cyan-deep); }
  &.is-error { color: var(--pink); }
}

@media (max-width: 720px) {
  .contact__form { grid-template-columns: 1fr; }
  .field--message { grid-row: auto; }
}

.footer {
  padding: clamp(40px, 3.3vw, 64px) var(--gutter);
  background: var(--ink);
  color: var(--white);
  font-size: 16px;
  text-align: center;
}

@media (max-width: 768px) {
  .footer { padding-inline: 84px; }
}

.footer__link {
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .25s;

  &:hover { color: var(--cyan); }
}

@media (max-width: 1024px) {
  .lore {
    height: auto;
    --tabs-x: 50%;
  }

  .lore[data-active="koubai"] { --tabs-x: 50%; }

  .lore__slide {
    display: grid;
    align-content: start;
    justify-items: center;
    padding: 110px var(--gutter) 130px;
  }

  .lore__slide[hidden] { display: none; }

  .lore__slide .lore__character {
    position: relative;
    inset: auto;
    width: auto;
    max-width: 100%;
    max-height: 58vw;
    margin-bottom: -12vw;
  }

  .lore__slide .lore__text {
    position: relative;
    inset: auto;
    width: min(640px, 100%);
    translate: none;
  }

  .lore__tabs {
    top: auto;
    bottom: 34px;
    translate: -50% 0;
  }
}

@media (max-width: 640px) {
  .hero__stage { --focus: 58%; left: var(--focus); }

  .team__list { gap: 18px; }
  .team__panel-inner { border-radius: 0 0 28px 28px; }

  .bplace__word { left: 5%; font-size: 9.5cqw; }
  .bplace__media { left: 30%; width: 58%; }
  .bplace__arrows { left: auto; right: 5%; font-size: 11cqw; }
}

.channel {
  overflow: clip;
  background:
    radial-gradient(60% 70% at 100% 0%, rgb(89 189 209 / .12), transparent 70%),
    radial-gradient(50% 60% at 0% 100%, rgb(222 86 152 / .12), transparent 70%),
    var(--ink);
}

.channel__layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: clamp(40px, 5vw, 96px);
  max-width: 1500px;
  margin-inline: auto;
}

.channel__intro {
  display: grid;
  gap: 1.1em;
  line-height: 1.6;

  > p:not(.channel__lead) { color: #d6d6d6; }
}

.channel__lead {
  color: var(--white);
  font-size: clamp(20px, 1.45vw, 28px);
  font-weight: 700;
  line-height: 1.35;
}

.schedule {
  display: grid;
  gap: 18px;
  margin-top: 1em;
  padding: clamp(20px, 1.6vw, 30px);
  border: 2px solid rgb(89 189 209 / .45);
  border-radius: 0 48px 0 0;
  background: var(--slate) url("../img/card-pattern.svg") 0 0 / 320px 560px;
}

.schedule__label {
  color: #d6d6d6;
  font-size: .95em;

  strong { color: var(--white); }
}

.schedule__days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;

  li {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border: 2px solid rgb(255 255 255 / .12);
    border-radius: 10px;
    color: rgb(255 255 255 / .35);
    font-size: clamp(12px, .8vw, 15px);
    font-weight: 700;
  }

  .is-live {
    border-color: var(--pink);
    background: var(--pink);
    color: var(--white);
    box-shadow: 0 8px 20px -8px rgb(222 86 152 / .8);

    &::after {
      content: "";
      position: absolute;
      top: 6px;
      right: 6px;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--white);
      animation: live-dot 1.6s ease-in-out infinite;
    }
  }
}

@keyframes live-dot {
  50% { opacity: .25; scale: .7; }
}

.channel__cta {
  justify-self: start;
  gap: 12px;
  margin-top: .6em;
  padding-inline: 1.6em;
  font-size: clamp(17px, 1.05vw, 20px);

  svg { width: 1.2em; height: 1.2em; fill: currentColor; }
}

.channel__themes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 1.6vw, 30px);
}

.theme {
  --frame: rgb(255 255 255 / .1);
  position: relative;
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: clamp(220px, 14vw, 270px);
  padding: clamp(22px, 1.8vw, 34px);
  border-radius: 0 64px 0 0;
  background: #242424 url("../img/card-pattern.svg") 0 0 / 320px 560px;
  transition: --frame .4s, translate .4s var(--ease-out), box-shadow .4s;

  &::after {
    content: "";
    position: absolute;
    inset: 4px;
    border: 2px solid var(--frame);
    border-radius: 0 60px 0 0;
    pointer-events: none;
  }

  &:nth-child(odd) { --accent: var(--pink); }
  &:nth-child(even) { --accent: var(--cyan); }

  &:hover {
    --frame: var(--accent);
    translate: 0 -6px;
    box-shadow: 0 24px 40px -24px rgb(0 0 0 / .8);

    .theme__icon { rotate: -8deg; scale: 1.08; }
    .theme__num { color: var(--accent); -webkit-text-stroke-color: var(--accent); }
  }
}

.theme__icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 8px;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--white);
  transition: rotate .4s var(--ease-spring), scale .4s var(--ease-spring);

  svg { width: 30px; height: 30px; fill: currentColor; }
}

.theme__num {
  position: absolute;
  top: clamp(18px, 1.4vw, 26px);
  right: clamp(46px, 3.4vw, 64px);
  color: transparent;
  font-size: clamp(40px, 3.2vw, 62px);
  font-weight: 900;
  line-height: 1;
  -webkit-text-stroke: 2px rgb(255 255 255 / .18);
  transition: color .4s, -webkit-text-stroke-color .4s;
}

.theme__title {
  color: var(--white);
  font-size: clamp(19px, 1.25vw, 24px);
  line-height: 1.2;
}

.theme__text {
  color: #a9a9a9;
  line-height: 1.55;
}

@media (max-width: 1100px) {
  .channel__layout { grid-template-columns: 1fr; }
  .channel__intro { max-width: 720px; margin-inline: auto; }
}

@media (max-width: 600px) {
  .channel__themes { grid-template-columns: 1fr; }
  .schedule__days { gap: 5px; }
  .schedule__days .is-live::after { top: 4px; right: 4px; width: 5px; height: 5px; }
}

.faq {
  background: var(--slate) url("../img/card-pattern.svg") 0 0 / 320px 560px;
  color: var(--white);

  .section__intro { color: #ddd; }
}

.faq__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: clamp(16px, 1.6vw, 30px);
  max-width: 1500px;
  margin-inline: auto;
}

.faq__col {
  display: grid;
  gap: clamp(14px, 1vw, 18px);
}

.faq__item {
  --accent: var(--cyan);
  position: relative;
  color: var(--ink);
  border: 2px solid transparent;
  border-radius: 0 28px 0 0;
  background: var(--white);
  box-shadow: 0 10px 30px -18px rgb(0 0 0 / .35);
  transition: border-color .3s, box-shadow .3s, translate .3s var(--ease-out);

  &::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--accent);
    transition: background-color .3s;
  }

  &:hover { translate: 4px 0; }

  &[open] {
    --accent: var(--pink);
    border-color: var(--pink);
    box-shadow: 0 18px 40px -22px rgb(222 86 152 / .7);
  }

  &::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size .45s var(--ease-out), content-visibility .45s allow-discrete;
  }

  &[open]::details-content { block-size: auto; }
}

.faq__question {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: clamp(16px, 1.2vw, 22px) clamp(18px, 1.4vw, 26px) clamp(16px, 1.2vw, 22px) clamp(22px, 1.6vw, 30px);
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  line-height: 1.35;

  &::-webkit-details-marker { display: none; }
}

.faq__badge {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--white);
  font-size: 20px;
  font-weight: 900;
  transition: background-color .3s, rotate .4s var(--ease-spring);

  [open] & { rotate: 360deg; }
}

.faq__toggle {
  position: relative;
  width: 22px;
  height: 22px;
  transition: rotate .4s var(--ease-out);

  &::before,
  &::after {
    content: "";
    position: absolute;
    inset: 50% 0 auto;
    height: 3px;
    border-radius: 3px;
    background: var(--accent);
    translate: 0 -50%;
    transition: background-color .3s;
  }

  &::after { rotate: 90deg; }

  [open] & { rotate: 135deg; }
}

.faq__answer {
  padding: 0 clamp(18px, 1.4vw, 26px) clamp(18px, 1.4vw, 24px) calc(clamp(22px, 1.6vw, 30px) + 54px);
  color: #444;
  line-height: 1.6;
}

@media (max-width: 900px) {
  .faq__list { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .faq__answer { padding-left: clamp(22px, 1.6vw, 30px); }
}

.reveal-ready {
  --reveal-ease: cubic-bezier(.16, 1, .3, 1);

  [data-reveal]:not(.is-settled),
  [data-reveal-group]:not(.is-settled) > * {
    transition:
      opacity .9s var(--reveal-ease),
      transform 1.1s var(--reveal-ease),
      clip-path 1.2s var(--reveal-ease),
      filter .9s var(--reveal-ease);
    transition-delay: calc(var(--i, 0) * 110ms + var(--delay, 0ms));
  }

  [data-reveal="title"] {
    opacity: 0;
    transform: translateY(36px);
    --delay: 200ms;

    &::before,
    &::after {
      opacity: 0;
      transition: transform 1.2s var(--reveal-ease) .45s, opacity .8s var(--reveal-ease) .45s;
    }

    &::before { transform: translateX(-60px) rotate(-25deg); }
    &::after { transform: translateX(60px) rotate(25deg); }

    &.is-revealed::before,
    &.is-revealed::after { opacity: 1; transform: none; }
  }

  [data-reveal="left"] {
    opacity: 0;
    transform: translateX(-140px) skewX(8deg);
    filter: blur(6px);
    --delay: 350ms;
  }

  [data-reveal="right"] {
    opacity: 0;
    transform: translateX(140px) skewX(-8deg);
    filter: blur(6px);
    --delay: 450ms;
  }

  [data-reveal="up"],
  [data-reveal-group="up"] > * {
    opacity: 0;
    transform: translateY(70px);
  }

  [data-reveal="zoom"],
  [data-reveal-group="zoom"] > * {
    opacity: 0;
    transform: scale(.6) rotate(-6deg);
    --delay: 200ms;
  }

  [data-reveal-group="rise"] > * {
    opacity: 0;
    transform: translateY(120px) rotate(4deg);
    --delay: 300ms;
  }

  [data-reveal-group="flip"] {
    perspective: 1400px;

    > * {
      opacity: 0;
      transform: rotateY(-75deg) translateX(-60px);
      transform-origin: left center;
      --delay: 300ms;
    }
  }

  .is-revealed,
  [data-reveal-group].is-revealed > * {
    opacity: 1;
    transform: none;
    filter: none;
  }

}

.lore__title[data-reveal="title"] { transform-origin: center; }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  white-space: nowrap;
  overflow: hidden;
  clip-path: inset(50%);
}