@layer sections {
  .sobre {
    position: relative;
    min-height: max(100svh, 680px);
    overflow: hidden;
    background: var(--c-green-base);
    font-family: var(--ff-garamond);
    font-size: 1rem;
    line-height: normal;
    color: var(--c-cream-warm);
    scroll-margin-top: calc(-1 * (var(--nav-h) + var(--space-md)));
  }
  .sobre .stage {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    padding: var(--nav-h) 16px 0;
  }
  .sobre .half {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 3;
    pointer-events: none;
    will-change: transform;
  }
  .sobre .half .stage {
    position: absolute;
    inset: 0;
  }
  .sobre .half .edge {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 60px;
    pointer-events: none;
  }
  .sobre .seam {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    z-index: 4;
    width: 2px;
    pointer-events: none;
    transform: translate(-50%) scaleY(0);
    transform-origin: 50% 0;
    background: linear-gradient(
      180deg,
      #fff4d600,
      #fff4d6e6 20% 80%,
      #fff4d600
    );
    box-shadow: 0 0 18px 4px #ffecc473;
  }
  .sobre .wall {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: var(--c-green-deep) url(../../img/sobre-parede.jpg) 50% 0 / cover
      no-repeat;
    background-image: image-set(
      url(../../img/sobre-parede.webp) type("image/webp"),
      url(../../img/sobre-parede.jpg) type("image/jpeg")
    );
  }
  .sobre .vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(
      ellipse 80% 75% at 50% 42%,
      transparent 45%,
      rgba(6, 9, 22, 0.45) 100%
    );
  }
  .sobre .composition {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(22px, 3.4vh, 36px);
    padding-block: clamp(16px, 4vh, 48px);
    perspective: 1200px;
  }
  .sobre .frame {
    position: relative;
    width: min(60vw, 38svh);
    max-width: 100%;
    aspect-ratio: 830 / 1233;
    transform-style: preserve-3d;
    transition: transform 0.5s var(--ease-soft);
    filter: drop-shadow(0 34px 28px rgba(0, 0, 0, 0.55))
      drop-shadow(0 6px 6px rgba(0, 0, 0, 0.4));
    animation: sobre-shadow-float 7s ease-in-out infinite;
  }
  .sobre .float {
    animation: sobre-float 7s ease-in-out infinite;
    will-change: transform;
  }
  .sobre:not(.is-visible) :is(.float, .frame, .scroll-cue) {
    animation-play-state: paused;
  }
  @keyframes sobre-float {
    0%,
    to {
      transform: translateY(0) rotate(-0.35deg);
    }
    50% {
      transform: translateY(-12px) rotate(0.35deg);
    }
  }
  @keyframes sobre-shadow-float {
    0%,
    to {
      filter: drop-shadow(0 30px 24px rgba(0, 0, 0, 0.55))
        drop-shadow(0 6px 6px rgba(0, 0, 0, 0.4));
    }
    50% {
      filter: drop-shadow(0 46px 34px rgba(0, 0, 0, 0.42))
        drop-shadow(0 10px 10px rgba(0, 0, 0, 0.3));
    }
  }
  .sobre .canvas {
    position: absolute;
    left: 9.76%;
    top: 6.49%;
    width: 80.48%;
    height: 86.94%;
    overflow: hidden;
    background: #0f1119;
  }
  .sobre .canvas img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .sobre .canvas:after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow:
      inset 0 10px 18px #0009,
      inset 0 0 40px #00000059;
  }
  .sobre .glare {
    position: absolute;
    inset: 6.49% 19.52% 6.57% 9.76%;
    pointer-events: none;
    background: linear-gradient(
      115deg,
      transparent 30%,
      rgba(255, 244, 220, 0.08) 45%,
      transparent 60%
    );
    mix-blend-mode: screen;
  }
  .sobre .molding {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
  .sobre .qmark {
    position: absolute;
    left: 9.76%;
    top: 6.49%;
    width: 80.48%;
    height: 86.94%;
    display: grid;
    place-items: center;
    pointer-events: none;
  }
  .sobre .qmark span {
    font-family: var(--ff-garamond);
    font-weight: 500;
    line-height: 1;
    color: var(--c-cream-warm);
    font-size: calc(min(60vw, 38svh) * 0.52);
    transform: translate(4%, -9%);
    text-shadow:
      0 0 30px rgba(241, 234, 216, 0.35),
      0 2px 0 rgba(0, 0, 0, 0.2);
  }
  .sobre .ask {
    font-family: var(--ff-small);
    font-size: clamp(13px, 1.1vw, 15px);
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--c-cream-warm);
    padding-left: 0.42em;
    text-shadow:
      0 1px 2px rgba(0, 0, 0, 0.85),
      0 0 22px rgba(0, 0, 0, 0.7),
      0 0 44px rgba(0, 0, 0, 0.5);
  }
  .sobre .plaque {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
  }
  .sobre .plaque h2 {
    font-family: var(--ff-caps);
    font-weight: 400;
    font-size: clamp(24px, 3.4vw, 40px);
    letter-spacing: 0.2em;
    padding-left: 0.2em;
  }
  .sobre .plaque .rule {
    width: 56px;
    height: 1px;
    margin-top: 4px;
    background: linear-gradient(
      90deg,
      transparent,
      var(--c-sage-light),
      transparent
    );
  }
  .sobre .content {
    position: relative;
    z-index: 1;
    display: none;
    background: var(--c-green-deep);
  }
  .sobre .content:focus {
    outline: none;
  }
  .sobre.revealed .content {
    display: block;
  }
  .sobre .scene {
    position: relative;
    height: clamp(620px, 100svh, 980px);
    overflow: hidden;
    isolation: isolate;
  }
  .sobre .scene-bg {
    position: absolute;
    inset: -3%;
    z-index: -3;
    filter: saturate(0.95);
    background:
      radial-gradient(
        ellipse 36% 50% at 50% 40%,
        rgba(255, 226, 180, 0.07),
        transparent 70%
      ),
      linear-gradient(180deg, #080c1a1a 40%, #080c1aa6),
      var(--c-green-deep) url(../../img/sobre-cenario.jpg) 50% 40% / cover
        no-repeat;
    background-image: radial-gradient(
        ellipse 36% 50% at 50% 40%,
        rgba(255, 226, 180, 0.07),
        transparent 70%
      ),
      linear-gradient(180deg, #080c1a1a 40%, #080c1aa6),
      image-set(
        url(../../img/sobre-cenario.webp) type("image/webp"),
        url(../../img/sobre-cenario.jpg) type("image/jpeg")
      );
  }
  .sobre .scene-bg:after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
      ellipse 85% 80% at 50% 45%,
      transparent 40%,
      rgba(5, 7, 17, 0.8) 100%
    );
  }
  .sobre .bigname {
    position: absolute;
    left: 0;
    right: 0;
    top: var(--name-top, 31%);
    z-index: -2;
    display: block;
    height: 1em;
    white-space: nowrap;
    pointer-events: none;
    font-family: var(--ff-condensed);
    font-weight: 400;
    line-height: 0.82;
    letter-spacing: 0.005em;
    font-size: min(19.5vw, 300px);
    color: #efe9da;
    text-shadow:
      0 0 38px rgba(241, 234, 216, 0.28),
      0 0 90px rgba(241, 234, 216, 0.12);
  }
  .sobre .bigname .w {
    position: absolute;
    top: 0;
    display: inline-flex;
  }
  .sobre .bigname .ch {
    display: inline-block;
  }
  .sobre .model {
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: -1;
    height: 94%;
    width: auto;
    max-width: none;
    transform: translate(-50%);
    filter: drop-shadow(0 0 40px rgba(0, 0, 0, 0.55))
      drop-shadow(8px -4px 22px rgba(255, 196, 120, 0.1));
  }
  .sobre .side {
    position: absolute;
    top: calc(var(--name-top, 31%) + min(19.5vw, 300px) * 0.86 + 18px);
    white-space: nowrap;
    font-family: var(--ff-small);
    font-size: clamp(10px, 0.85vw, 12px);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--c-cream-warm);
    padding: 0.55em 1.1em 0.5em 1.34em;
    border: 1px solid rgba(241, 234, 216, 0.42);
    background: #0609168c;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    box-shadow: 0 6px 18px #00000059;
  }
  .sobre .side.l {
    left: max(16px, 6vw);
  }
  .sobre .side.r {
    right: max(16px, 6vw);
  }
  .sobre .scene-fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    height: 22%;
    background: linear-gradient(180deg, transparent, var(--c-green-deep));
  }
  .sobre .scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 22px;
    translate: -50% 0;
    z-index: 2;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    color: var(--c-cream-warm);
    animation: sobre-cue 2.2s ease-in-out infinite;
  }
  .sobre .scroll-cue svg {
    width: 22px;
    height: 30px;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
  }
  .sobre .scroll-cue:hover {
    color: var(--c-white);
  }
  .sobre .scroll-cue:focus-visible {
    outline: 1px solid var(--c-sage-light);
    outline-offset: 4px;
  }
  @keyframes sobre-cue {
    0%,
    to {
      transform: translateY(0);
      opacity: 0.75;
    }
    50% {
      transform: translateY(8px);
      opacity: 1;
    }
  }
  .sobre .overtitle {
    position: relative;
    display: grid;
    place-items: center;
    text-align: center;
    width: min(1080px, 100%);
    margin: 0 auto clamp(40px, 7vh, 80px);
  }
  .sobre .overtitle .back {
    grid-area: 1 / 1;
    white-space: nowrap;
    font-family: var(--ff-garamond);
    font-weight: 500;
    text-transform: uppercase;
    line-height: 0.9;
    letter-spacing: 0.01em;
    font-size: clamp(44px, 13.5vw, 190px);
    background: var(--grad-gold-fade);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .sobre .overtitle .front {
    grid-area: 1 / 1;
    align-self: end;
    margin-bottom: -0.15em;
    font-family: var(--ff-garamond);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: clamp(20px, 3.4vw, 50px);
    color: var(--c-white);
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6);
  }
  @media (max-width: 600px) {
    .sobre .overtitle .back {
      white-space: normal;
      font-size: 27vw;
      line-height: 0.82;
      background: linear-gradient(
        180deg,
        #d9b36a,
        #c29a55 45%,
        #b08a4a 70%,
        #b08a4a59
      );
      -webkit-background-clip: text;
      background-clip: text;
    }
    .sobre .overtitle .back .l2 {
      display: block;
    }
    .sobre .overtitle .front {
      font-size: 7vw;
      margin-bottom: -0.3em;
    }
  }
  .sobre .about {
    padding-inline: 16px;
    padding-block: clamp(56px, 9vh, 110px) clamp(72px, 12vh, 140px);
    background: linear-gradient(
      180deg,
      var(--c-green-deep),
      var(--c-green-night)
    );
    --dur-reveal: 0.9s;
    --reveal-distance: 24px;
    --stagger-step: 0.11s;
    --ease-reveal: var(--ease-soft);
  }
  .sobre .about-inner {
    width: min(760px, 100%);
    margin-inline: auto;
  }
  .sobre .about-body {
    display: flex;
    flex-direction: column;
    gap: 22px;
    max-width: 66ch;
    margin-inline: auto;
  }
  .sobre .about-body p {
    font-size: clamp(19px, 1.6vw, 22px);
    line-height: 1.55;
    color: #f1ead8e0;
  }
  .sobre .about-body .lead {
    font-size: clamp(22px, 2.1vw, 28px);
    line-height: 1.45;
    color: var(--c-cream-warm);
  }
  .sobre .actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 18px 24px;
    margin-top: 18px;
  }
  .sobre .actions .cta {
    margin-inline: 12px 0;
  }
  .sobre .ghost {
    color: #f1ead8bf;
    padding: 10px 4px;
    line-height: normal;
    font-family: var(--ff-small);
    font-size: 12px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
  }
  .sobre .ghost:hover {
    color: var(--c-cream-warm);
  }
  .sobre .ghost:focus-visible {
    outline: 2px solid var(--c-sage-light);
    outline-offset: 4px;
  }
  .sobre.revealed .scene-bg {
    animation: sobre-bg-in 1.8s var(--ease-soft) both;
  }
  .sobre.revealed .bigname .ch {
    animation: sobre-char-in 1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    animation-delay: calc(var(--c) * 45ms + 0.25s);
  }
  .sobre.revealed .model {
    animation: sobre-model-in 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) 0.55s both;
  }
  .sobre.revealed .side {
    animation: sobre-rise 0.9s var(--ease-soft) 1.1s both;
  }
  @keyframes sobre-bg-in {
    0% {
      opacity: 0;
      transform: scale(1.08);
    }
  }
  @keyframes sobre-char-in {
    0% {
      opacity: 0;
      transform: translateY(40%) scaleY(1.2);
      filter: blur(8px);
    }
  }
  @keyframes sobre-model-in {
    0% {
      opacity: 0;
      transform: translate(-50%, 70px);
    }
  }
  @keyframes sobre-rise {
    0% {
      opacity: 0;
      transform: translateY(24px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  .sobre .pl {
    transition: translate 0.6s var(--ease-soft);
  }
  @media (max-width: 820px) {
    .sobre .scene {
      height: calc(clamp(560px, 86svh, 820px) + var(--scene-head, 0px));
    }
    .sobre .model {
      height: calc((100% - var(--scene-head, 0px)) * 0.74);
    }
    .sobre .side {
      top: auto !important;
      bottom: 9%;
      z-index: 1;
      font-size: 10.5px;
      letter-spacing: 0.22em;
    }
    .sobre .side.l,
    .sobre .side.r {
      left: 50% !important;
      right: auto !important;
      translate: -50% 0;
    }
    .sobre .side.l {
      bottom: 13.5%;
    }
    .sobre .side.r {
      bottom: 9.5%;
    }
  }
  @media (max-width: 820px) and (max-height: 720px) {
    .sobre .side.l {
      bottom: 108px;
    }
    .sobre .side.r {
      bottom: 76px;
    }
  }
  html:not(.js) .sobre .stage,
  html:not(.js) .sobre .scene,
  html:not(.js) .sobre [data-action="replay"] {
    display: none;
  }
  html:not(.js) .sobre .content {
    display: block;
  }
  @media (prefers-reduced-motion: reduce) {
    .sobre *,
    .sobre *:before,
    .sobre *:after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition: none !important;
    }
  }
}