/* ==========================================================================
   Espaço Novo Tempo — camada de movimento (animacoes.css)
   Carregar DEPOIS do home.css:  <link rel="stylesheet" href="/animacoes.css">
   Todas as classes desta camada usam o prefixo .nt- para não colidir com o site.
   ========================================================================== */

:root {
  --nt-ink: var(--ink, #121212);
  --nt-paper: var(--paper, #f3f3f0);
  --nt-ease-out: cubic-bezier(.16, 1, .3, 1);   /* desacelera longo, sem quique */
  --nt-ease-soft: cubic-bezier(.22, 1, .36, 1);
  --nt-ease-back: cubic-bezier(.34, 1.56, .64, 1);
  --nt-ease-io: cubic-bezier(.76, 0, .24, 1);
  --nt-glow: 255 226 196;                        /* luz quente do “amanhecer” */
}

/* Elemento próprio da camada (não herda regras de span/div do site) */
nt-x { display: inline; }
.nt-orbit, .nt-orbit-stage { display: block; }

/* ---------- Rolagem suave (Lenis) ---------- */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ==========================================================================
   1. ABERTURA — “amanhecer”
   Só CSS: roda no primeiro quadro, sem esperar o JavaScript.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .hero { background-color: #080808; }

  .hero-image img {
    transform-origin: 50% 62%;
    animation: nt-dawn-photo 3s var(--nt-ease-out) .45s backwards;
  }

  .hero-top > span { animation: nt-drop .95s var(--nt-ease-soft) backwards; }
  .hero-top > span:nth-child(1) { animation-delay: .4s; }
  .hero-top > span:nth-child(2) { animation-delay: .52s; }

  .hero-main .eyebrow { animation: nt-eyebrow 1.2s var(--nt-ease-soft) .7s backwards; }
  .hero-main .eyebrow > span {
    display: inline-block;
    animation: nt-flip 1.3s var(--nt-ease-back) 1.25s backwards;
  }

  .hero-word {
    display: inline-block;
    transform-origin: 0 100%;
    animation: nt-word 1.35s var(--nt-ease-out) .9s backwards;
  }
  .hero-word-mask:nth-child(2) .hero-word { animation-delay: 1.06s; }

  .hero h1 .star {
    display: inline-block;
    animation: nt-star 1.4s var(--nt-ease-back) 1.55s backwards,
               nt-spin 26s linear 2.95s infinite;
  }

  .hero-under p { animation: nt-rise-in 1.1s var(--nt-ease-soft) 1.2s backwards; }
  .hero-under .round-arrow { animation: nt-drop-far 1.1s var(--nt-ease-soft) 1s backwards; }
  .hero-bottom > * { animation: nt-rise-in 1s var(--nt-ease-soft) backwards; }
  .hero-bottom > :nth-child(1) { animation-delay: 1.4s; }
  .hero-bottom > :nth-child(2) { animation-delay: 1.5s; }
  .hero-bottom > :nth-child(3) { animation-delay: 1.6s; }

  .header { animation: nt-header .9s var(--nt-ease-soft) 1.55s backwards; }
}

@keyframes nt-dawn-photo {
  from { opacity: .15; transform: scale(1.18); filter: blur(14px) brightness(.55); }
  60%  { filter: blur(0) brightness(.92); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes nt-drop     { from { opacity: 0; transform: translate3d(0, -12px, 0); } to { opacity: 1; transform: none; } }
@keyframes nt-drop-far { from { opacity: 0; transform: translate3d(0, -40px, 0) rotate(-45deg); } to { opacity: 1; transform: none; } }
@keyframes nt-rise-in  { from { opacity: 0; transform: translate3d(0, 18px, 0); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes nt-eyebrow  { from { opacity: 0; letter-spacing: .5em; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
@keyframes nt-flip     { from { opacity: 0; transform: rotateY(180deg); } to { opacity: 1; transform: none; } }
@keyframes nt-word {
  from { transform: translate3d(0, 112%, 0) rotate(3deg); clip-path: inset(0 0 112% 0); }
  to   { transform: none; clip-path: inset(-30% -6% -30% -6%); }
}
@keyframes nt-star  { from { opacity: 0; transform: rotate(-200deg) scale(.2); } to { opacity: 1; transform: none; } }
@keyframes nt-spin  { to { transform: rotate(360deg); } }
@keyframes nt-header { from { opacity: 0; transform: translate3d(0, -14px, 0); } to { opacity: 1; transform: none; } }

/* Linha de luz que atravessa o topo da capa (inserida pelo JS) */
.nt-dawn {
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  z-index: 6; pointer-events: none;
}
.nt-dawn::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgb(var(--nt-glow) / 0), rgb(var(--nt-glow) / .7) 72%, #fff);
  transform-origin: 0 50%;
  animation: nt-dawn-line 2.4s var(--nt-ease-out) .6s both;
}
.nt-dawn::after {
  content: ""; position: absolute; top: -14px; left: 0; width: 240px; height: 30px;
  background: radial-gradient(closest-side, rgb(255 246 234 / .95), rgb(var(--nt-glow) / .35) 45%, transparent);
  filter: blur(2px);
  animation: nt-dawn-head 2.4s var(--nt-ease-out) .6s both;
}
@keyframes nt-dawn-line {
  0%   { transform: scaleX(0); opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: scaleX(1); opacity: .28; }
}
@keyframes nt-dawn-head {
  0%   { transform: translate3d(-260px, 0, 0); opacity: 0; }
  12%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translate3d(calc(100vw - 120px), 0, 0); opacity: 0; }
}

/* Desfoque progressivo no topo da capa, atrás do menu (inserido pelo JS) */
.nt-veil {
  position: absolute; left: 0; right: 0; top: 0;
  height: clamp(110px, 19vh, 200px);
  pointer-events: none;
  background: linear-gradient(to bottom, rgb(8 8 8 / .34), rgb(8 8 8 / 0));
}
.nt-veil > * { position: absolute; inset: 0; }
.nt-veil > *:nth-child(1) { backdrop-filter: blur(1px);  -webkit-backdrop-filter: blur(1px);  -webkit-mask: linear-gradient(#000 0 70%, transparent 100%); mask: linear-gradient(#000 0 70%, transparent 100%); }
.nt-veil > *:nth-child(2) { backdrop-filter: blur(2px);  -webkit-backdrop-filter: blur(2px);  -webkit-mask: linear-gradient(#000 0 52%, transparent 78%);  mask: linear-gradient(#000 0 52%, transparent 78%); }
.nt-veil > *:nth-child(3) { backdrop-filter: blur(4px);  -webkit-backdrop-filter: blur(4px);  -webkit-mask: linear-gradient(#000 0 36%, transparent 60%);  mask: linear-gradient(#000 0 36%, transparent 60%); }
.nt-veil > *:nth-child(4) { backdrop-filter: blur(8px);  -webkit-backdrop-filter: blur(8px);  -webkit-mask: linear-gradient(#000 0 20%, transparent 44%);  mask: linear-gradient(#000 0 20%, transparent 44%); }
.nt-veil > *:nth-child(5) { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); -webkit-mask: linear-gradient(#000 0 6%, transparent 28%);   mask: linear-gradient(#000 0 6%, transparent 28%); }
@media (prefers-reduced-motion: no-preference) {
  .nt-veil { animation: nt-fade 1.2s ease 1.5s backwards; }
}
@keyframes nt-fade { from { opacity: 0; } to { opacity: 1; } }

/* ==========================================================================
   2. CAPA E PANORAMA “CORTINA” (os valores vêm do JS a cada quadro)
   ========================================================================== */
.nt-curtain { transform-origin: 50% 0; will-change: transform; }
.nt-dim {
  position: absolute; inset: 0; background: #050505;
  opacity: 0; pointer-events: none;
}

/* ==========================================================================
   3. COLUNAS EM DEGRAU (“teclas”) na entrada das seções claras
   ========================================================================== */
.nt-keys {
  position: absolute; left: 0; right: 0; bottom: calc(100% - 2px);
  height: clamp(90px, 24vh, 260px);
  display: flex; overflow: hidden;
  pointer-events: none; z-index: 3;
  visibility: hidden;
}
.nt-key {
  flex: 1 1 0; margin-right: -1px;
  background: var(--nt-kbg, var(--nt-paper));
  border-radius: 14px 14px 0 0;
  transform: translate3d(0, 100%, 0);
  will-change: transform;
}
@media (max-width: 850px) {
  .nt-keys { height: clamp(70px, 15vh, 150px); }
  .nt-key { border-radius: 10px 10px 0 0; }
}

/* ==========================================================================
   4. TÍTULOS LINHA A LINHA + BLOCOS QUE SURGEM
   (estados escondidos só existem quando o JS marca o elemento)
   ========================================================================== */
.nt-split .nt-line { display: block; }
.nt-split .nt-line-in {
  display: inline-block;
  transform-origin: 0 100%;
  transform: translate3d(0, 112%, 0) rotate(2.5deg);
  clip-path: inset(0 0 112% 0);
  transition: transform 1.25s var(--nt-ease-out) calc(var(--i, 0) * 95ms),
              clip-path 1.25s var(--nt-ease-out) calc(var(--i, 0) * 95ms);
}
.nt-split.is-in .nt-line-in { transform: none; clip-path: inset(-30% -6% -30% -6%); }

.nt-motion .nt-rise {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  filter: blur(8px);
  transition: opacity 1s var(--nt-ease-soft) var(--d, 0ms),
              transform 1.25s var(--nt-ease-out) var(--d, 0ms),
              filter 1s var(--nt-ease-soft) var(--d, 0ms);
}
.nt-motion .nt-rise.is-in { opacity: 1; transform: none; filter: none; }

/* ==========================================================================
   5. FOTOS — abertura em cortina, parallax interno e zoom no hover
   ========================================================================== */
.nt-motion .nt-fig {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.5s var(--nt-ease-io) var(--d, 0ms);
}
.nt-motion .nt-fig.is-in { clip-path: inset(0 0 0 0); }
.nt-motion .nt-fig img {
  scale: 1.34;
  transition: scale 1.9s var(--nt-ease-out) var(--d, 0ms);
  will-change: translate, scale;
}
.nt-motion .nt-fig.is-in img { scale: 1.16; }
@media (hover: hover) {
  .nt-motion .nt-fig.is-in:hover img { scale: 1.24; transition-duration: 1.1s; transition-delay: 0s; }
}
.nt-motion .nt-fig figcaption {
  opacity: 0; transform: translate3d(0, 12px, 0);
  transition: opacity .8s ease calc(var(--d, 0ms) + .7s), transform .9s var(--nt-ease-soft) calc(var(--d, 0ms) + .7s);
}
.nt-motion .nt-fig.is-in figcaption { opacity: 1; transform: none; }

/* ==========================================================================
   6. FAIXA INFINITA (legenda do panorama)
   ========================================================================== */
.nt-marquee {
  left: 0 !important; right: 0 !important; width: auto !important; max-width: none !important;
  overflow: hidden; white-space: nowrap; text-align: left !important;
  -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.nt-marquee-track { display: inline-flex; animation: nt-marquee 34s linear infinite; }
.nt-marquee-track > * { padding-right: .9em; }
@keyframes nt-marquee { to { transform: translate3d(-50%, 0, 0); } }
.nt-sr {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   7. CARROSSEL 3D — “Registros 360°” (seção 04)
   ========================================================================== */
.nt-orbit {
  --w: clamp(150px, 18vw, 250px);
  --h: calc(var(--w) * 1.32);
  position: relative;
  margin: clamp(48px, 7vw, 110px) 0 clamp(36px, 5vw, 80px);
  overflow: hidden;
  padding-block: 20px;
}
.nt-orbit-stage {
  position: relative;
  height: calc(var(--h) * 1.32);
  perspective: 1500px;
  perspective-origin: 50% 40%;
  touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
  cursor: grab; outline: none;
}
.nt-orbit-stage:active { cursor: grabbing; }
.nt-orbit-stage:focus-visible { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .5); border-radius: 16px; }
.nt-orbit-ring {
  position: absolute; left: 50%; top: 50%;
  width: var(--w); height: var(--h);
  margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2);
  transform-style: preserve-3d;
  will-change: transform;
}
.nt-orbit-card {
  position: absolute; inset: 0; margin: 0;
  border-radius: 18px; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: #1b1b1b;
  box-shadow: 0 30px 60px -30px rgb(0 0 0 / .8);
}
.nt-orbit-card img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  pointer-events: none; -webkit-user-drag: none;
}
.nt-orbit-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(160deg, rgb(255 255 255 / .16), transparent 38%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08);
}
.nt-orbit-foot {
  display: flex; justify-content: space-between; gap: 16px;
  margin-top: 18px; padding-inline: 4px;
  font-size: 11px; letter-spacing: .16em; opacity: .62;
}
@media (max-width: 850px) {
  .nt-orbit-stage { perspective: 950px; }
}

/* ==========================================================================
   8. BOTÕES, MENU E SETAS
   ========================================================================== */
.nt-btn { isolation: isolate; overflow: hidden; }
.nt-btn-fill {
  position: absolute; z-index: -1; pointer-events: none;
  left: var(--nt-x, 50%); top: var(--nt-y, 50%);
  width: var(--nt-d, 400px); height: var(--nt-d, 400px);
  margin: calc(var(--nt-d, 400px) / -2) 0 0 calc(var(--nt-d, 400px) / -2);
  border-radius: 50%;
  background: var(--nt-fill, currentColor);
  transform: scale(0);
  transition: transform .7s var(--nt-ease-out);
}
.nt-btn.is-hover .nt-btn-fill { transform: scale(1); }

.nt-roll {
  display: inline-grid; vertical-align: bottom;
  overflow: hidden; padding: .14em 0; margin: -.14em 0;
}
.nt-w { display: inline-block; white-space: nowrap; }
.nt-roll > * { grid-area: 1 / 1; }
.nt-ch {
  display: inline-block; white-space: pre;
  transition: transform .62s var(--nt-ease-out) calc(var(--i, 0) * 14ms);
}
.nt-roll-b .nt-ch { transform: translate3d(0, 135%, 0); }
.nt-btn .nt-roll-b, .nt-btn .nt-arrow > * + * { color: var(--nt-ink2, currentColor); }

.nt-arrow {
  display: inline-grid; overflow: hidden;
  padding: .12em; margin: -.12em -.12em -.12em .42em;
  vertical-align: bottom; line-height: 1;
}
.nt-arrow > * { grid-area: 1 / 1; transition: transform .6s var(--nt-ease-out); }
.nt-arrow--ne > * + * { transform: translate3d(-130%, 130%, 0); }
.nt-arrow--se > * + * { transform: translate3d(-130%, -130%, 0); }
.nt-arrow--up > * + * { transform: translate3d(0, 130%, 0); }
.nt-arrow--down > * + * { transform: translate3d(0, -130%, 0); }
.nt-arrow--solo { margin-left: -.12em; }

@media (hover: hover) {
  .nt-hov:hover .nt-roll-a .nt-ch, .nt-hov.is-hover .nt-roll-a .nt-ch { transform: translate3d(0, -135%, 0); }
  .nt-hov:hover .nt-roll-b .nt-ch, .nt-hov.is-hover .nt-roll-b .nt-ch { transform: none; }
  .nt-hov:hover .nt-arrow--ne > :first-child, .nt-hov.is-hover .nt-arrow--ne > :first-child { transform: translate3d(130%, -130%, 0); }
  .nt-hov:hover .nt-arrow--se > :first-child, .nt-hov.is-hover .nt-arrow--se > :first-child { transform: translate3d(130%, 130%, 0); }
  .nt-hov:hover .nt-arrow--up > :first-child, .nt-hov.is-hover .nt-arrow--up > :first-child { transform: translate3d(0, -130%, 0); }
  .nt-hov:hover .nt-arrow--down > :first-child, .nt-hov.is-hover .nt-arrow--down > :first-child { transform: translate3d(0, 130%, 0); }
  .nt-hov:hover .nt-arrow > * + *, .nt-hov.is-hover .nt-arrow > * + * { transform: none; }
}
.nt-hov:focus-visible .nt-roll-a .nt-ch { transform: translate3d(0, -135%, 0); }
.nt-hov:focus-visible .nt-roll-b .nt-ch, .nt-hov:focus-visible .nt-arrow > * + * { transform: none; }
.nt-hov:focus-visible .nt-arrow > *:first-child { transform: translate3d(130%, -130%, 0); }

/* Linhas grandes de link (seção 04): faixa sobe por trás no hover */
.nt-row { position: relative; isolation: isolate; }
.nt-row::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: color-mix(in srgb, currentColor 7%, transparent);
  transform: scaleY(0); transform-origin: 50% 100%;
  transition: transform .7s var(--nt-ease-out);
}
@media (hover: hover) { .nt-row:hover::before { transform: scaleY(1); } }

/* Letreiro final do rodapé */
.nt-big-ch { display: inline-block; white-space: pre; }
.nt-motion .nt-big:not(.is-in) .nt-big-ch { opacity: 0; transform: translate3d(0, 55%, 0); }
.nt-motion .nt-big .nt-big-ch {
  transition: opacity .9s ease calc(var(--i) * 45ms), transform 1.2s var(--nt-ease-out) calc(var(--i) * 45ms);
}

/* ==========================================================================
   9. CURSOR DOS CARDS
   ========================================================================== */
.nt-cursor {
  position: fixed; left: 0; top: 0; z-index: 95;
  width: 88px; height: 88px; margin: -44px 0 0 -44px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--nt-ink); color: var(--nt-paper);
  font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  pointer-events: none; transform: scale(0); will-change: transform;
}
.nt-cursor.is-light { background: var(--nt-paper); color: var(--nt-ink); }
.nt-cursor-on, .nt-cursor-on * { cursor: none !important; }

/* ==========================================================================
   Movimento reduzido: nada se esconde, nada fica girando
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .nt-ch, .nt-arrow > *, .nt-btn-fill, .nt-row::before { transition: none !important; }
  .nt-marquee-track { animation: none; }
  .nt-dawn, .nt-cursor { display: none; }
}

/* Auditoria mobile (320–430px): evita overflow de títulos e equilibra a capa
   preservando a foto coletiva por inteiro. */
@media (max-width: 560px) {
  .hero { height: clamp(670px, 92svh, 820px); min-height: 670px; max-height: 820px; }
  .intro-grid, .intro-grid > div, .intro h2 { min-width: 0; }
  .intro h2 { overflow-wrap: normal; }
  .nt-orbit { max-width: 100%; }
  .nt-orbit-stage { width: 100%; }
}
@media (max-width: 390px) {
  .intro h2 { font-size: clamp(43px, 13.8vw, 54px); }
}

/* Setas em SVG: traço idêntico no desktop e no iOS, sem fallback de emoji. */
.nt-arrow-svg {
  display: block;
  width: 1em;
  height: 1em;
  flex: none;
  overflow: visible;
}
.nucleus-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  min-height: 20px;
}
.nucleus-arrow .nt-arrow-svg {
  width: 20px;
  height: 20px;
}

/* RELOAD & SAFARI FIX — deterministic backgrounds and safe document stacking.
   No runtime JavaScript may force backgrounds based on partial computed styles. */
main > .hero { position: relative; z-index: 0; }
main > section:not(.hero),
main > .motion-ticker { position: relative; z-index: 1; }
main > .light-section { background-color: #f3f3f0; color: #121212; }
main > .motion-ticker { background-color: #ebebe8; color: #171717; }
main > .dark-section, main > .gallery { background-color: #111; color: #fff; }
.motion-ticker-track b { font-family: Arial, sans-serif; font-variant-emoji: text; }
/* Remove Safari's stacked backdrop blur from the former sticky hero. */
.nt-veil { display: none !important; }
@media (max-width: 850px) {
  /* Mobile scrolls natively; no blurry overlay or sticky slide above sections. */
  main > .hero, main > .panorama { position: relative !important; }
  .nt-curtain { will-change: auto; }
}

/* Safe section boundaries: mobile/tablet use a clean, flat separation.
   The desktop stepped curtain remains, now with an explicit paper color. */
main > section.light-section { background-color: #f3f3f0; }
@media (max-width: 850px), (hover: none), (pointer: coarse) {
  .nt-keys, .nt-key { display: none !important; visibility: hidden !important; animation: none !important; transform: none !important; }
  .hero + .motion-ticker { position: relative; z-index: 1; }
  .motion-ticker + .intro { position: relative; z-index: 1; margin-top: 0; }
  .motion-ticker, .intro { clip-path: none; }
}


/* NÚCLEOS / 2026 — diretório editorial interativo.
   <details> garante abertura por teclado e funcionamento sem JavaScript. */
.nuclei .nuclei-header > div{max-width:470px}
.nuclei .nuclei-hint{
  margin-top:27px;padding-top:17px;border-top:1px solid rgba(17,17,17,.26);
  display:flex;justify-content:space-between;align-items:center;gap:18px;
  font-size:10px!important;font-weight:800;line-height:1.5!important;
  letter-spacing:.14em;color:#333!important
}
.nuclei .nuclei-hint span{font-size:24px;font-weight:400}
.nuclei .nuclei-cards{gap:14px;align-items:start}
.nuclei .nucleus{
  display:block;min-height:0;padding:0;
  background:#e7e7e3;color:#171717;
  border:1px solid #d7d7d1;border-radius:18px;
  overflow:hidden;isolation:isolate;box-shadow:none;
  transition:background-color .42s cubic-bezier(.22,1,.36,1),
    color .42s ease,border-color .42s ease,box-shadow .42s ease
}
.nuclei .nucleus summary{
  cursor:pointer;list-style:none;
  display:grid;grid-template-columns:38px minmax(0,1fr) 42px;
  align-items:center;column-gap:22px;
  min-height:168px;padding:25px 28px;
  outline-offset:-6px;
}
.nuclei .nucleus summary::-webkit-details-marker{display:none}
.nuclei .nucleus summary::marker{content:''}
.nuclei .nucleus summary:focus-visible{outline:2px solid currentColor;outline-offset:-7px;border-radius:15px}
.nuclei .nucleus .num{
  align-self:start;padding-top:3px;
  font-size:12px;font-weight:800;letter-spacing:.13em;
  opacity:.62;font-variant-numeric:tabular-nums
}
.nuclei .nucleus h3{
  max-width:26ch;min-width:0;overflow-wrap:break-word;
  font-size:clamp(23px,2.3vw,35px);font-weight:700;
  line-height:1.15;letter-spacing:-.06em
}
.nuclei .nucleus .nucleus-arrow{
  align-self:center;display:grid;place-items:center;
  width:42px;height:42px;min-width:42px;min-height:42px;
  border:1px solid currentColor;border-radius:50%;
  transition:transform .5s cubic-bezier(.22,1,.36,1),background-color .3s,opacity .3s;
  opacity:.78
}
.nuclei .nucleus .nucleus-arrow .nt-arrow-svg{width:18px;height:18px}
.nuclei .nucleus .nucleus-arrow .nt-arrow{margin:0;padding:0;display:inline-grid}
.nuclei .nucleus[open]{
  color:#faf9f4;background:#191919;border-color:#191919;
  box-shadow:0 22px 45px rgba(0,0,0,.12)
}
.nuclei .nucleus[open] .nucleus-arrow{transform:rotate(45deg);background:#f3f3f0;color:#191919;opacity:1}
.nuclei .nucleus-detail{
  padding:0 32px 30px 88px;
  max-width:590px;
  animation:nucleus-detail-in .52s cubic-bezier(.16,1,.3,1) both
}
.nuclei .nucleus-detail-label{
  display:block;padding-top:20px;border-top:1px solid rgba(255,255,255,.27);
  font-size:10px;font-weight:800;letter-spacing:.16em;opacity:.62
}
.nuclei .nucleus-detail p{
  max-width:420px;margin-top:15px;
  font-size:clamp(15px,1.15vw,17px);line-height:1.75;
  letter-spacing:-.01em;color:inherit
}
@keyframes nucleus-detail-in{
  from{opacity:0;transform:translateY(-9px)}
  to{opacity:1;transform:translateY(0)}
}
@media (hover:hover) and (pointer:fine){
  .nuclei .nucleus:not([open]):hover{color:#fff;background:#242424;border-color:#242424}
  .nuclei .nucleus:not([open]):hover .nucleus-arrow{transform:rotate(45deg)}
  .nuclei .nucleus:hover{box-shadow:0 15px 35px rgba(0,0,0,.10)}
}
@media (max-width:850px){
  .nuclei .nuclei-cards{gap:10px}
  .nuclei .nucleus summary{min-height:132px;padding:22px 23px;grid-template-columns:30px minmax(0,1fr) 40px;gap:14px}
  .nuclei .nucleus h3{font-size:clamp(22px,4.1vw,31px)}
  .nuclei .nucleus-detail{padding:0 26px 25px 68px}
}
@media (max-width:560px){
  .nuclei .nuclei-hint{font-size:9px!important;margin-top:20px}
  .nuclei .nucleus{border-radius:15px}
  .nuclei .nucleus summary{
    min-height:116px;padding:18px 17px;
    grid-template-columns:24px minmax(0,1fr) 36px;gap:10px
  }
  .nuclei .nucleus h3{font-size:clamp(20px,5.6vw,25px);line-height:1.18}
  .nuclei .nucleus .num{font-size:10px}
  .nuclei .nucleus .nucleus-arrow{width:36px;height:36px;min-width:36px;min-height:36px}
  .nuclei .nucleus .nucleus-arrow .nt-arrow-svg{width:16px;height:16px}
  .nuclei .nucleus-detail{padding:0 19px 22px 51px}
  .nuclei .nucleus-detail p{font-size:14px;line-height:1.65}
}
@media (prefers-reduced-motion:reduce){
  .nuclei .nucleus,.nuclei .nucleus .nucleus-arrow,.nuclei .nucleus-detail{
    transition:none!important;animation:none!important
  }
}