* { box-sizing: border-box; }

    :root{
      --bg:#1e2f2b;
      --text:#ffffff;
      --overlay: rgba(255,255,255,.08);
    }

    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      overflow: hidden;
      font-family: 'Grenze Gotisch', serif;
      background: var(--bg);
      color: var(--text);
    }

    body{
      transition: background 900ms ease;
      position:relative;
    }

    body::after{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      z-index:120;
      opacity:.06;
      background-image:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,.12) 0 1px, transparent 1.2px),
        radial-gradient(circle at 80% 30%, rgba(255,255,255,.08) 0 1px, transparent 1.2px),
        radial-gradient(circle at 40% 70%, rgba(0,0,0,.10) 0 1px, transparent 1.2px),
        radial-gradient(circle at 70% 80%, rgba(0,0,0,.08) 0 1px, transparent 1.2px);
      background-size: 120px 120px, 170px 170px, 140px 140px, 200px 200px;
      mix-blend-mode:overlay;
    }

    .wrapper {
      height: 100vh;
      overflow-y: auto;
      scroll-snap-type: y mandatory;
      scroll-behavior: smooth;
    }

    .section {
      position: relative;
      min-height: 100vh;
      scroll-snap-align: start;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      padding: 32px;
      isolation: isolate;
    }

    .section::before{
      content:"";
      position:absolute;
      inset:0;
      background: radial-gradient(circle at 50% 45%, var(--overlay), transparent 58%);
      opacity:.75;
      z-index:0;
      pointer-events:none;
    }

    .section::after{
      content:"";
      position:absolute;
      inset:auto 0 0 0;
      height:18vh;
      background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.08));
      z-index:1;
      pointer-events:none;
      opacity:.45;
    }

    .urzednicza37-section::before{
      background: radial-gradient(circle at center,
        #000000 0%,
        #000000 42%,
        rgba(120,0,40,.35) 65%,
        rgba(255,60,100,.18) 82%,
        transparent 100%);
      opacity:1;
    }

    .rynekpodgorski-section::before{
      background:none;
      opacity:1;
    }

    .rynekpodgorski-burst{
      position:absolute;
      left:50%;
      top:50%;
      width:min(90vw, 760px);
      aspect-ratio:1/1;
      transform:translate(-50%,-50%);
      pointer-events:none;
      z-index:1;
      opacity:.22;
      mix-blend-mode:multiply;
      filter:contrast(110%);
      animation:burstSpin 28s linear infinite;
    }

    @keyframes burstSpin{
      from{ transform:translate(-50%,-50%) rotate(0deg); }
      to{ transform:translate(-50%,-50%) rotate(360deg); }
    }

    .section.active:first-child::before{
      background: radial-gradient(circle at center, #e9efe0 0%, #f1f4e9 55%, #f1f4e9 100%);
      opacity:1;
    }

    .hero {
      text-align: center;
      max-width: 900px;
      position: relative;
      z-index: 2;
    }

    .hero-logos{
      display:flex;
      align-items:center;
      justify-content:center;
      height:100%;
    }

    .logo-stack{
      position:relative;
      display:flex;
      align-items:center;
      justify-content:center;
      perspective:1200px;
    }

    .logo-back{
      position:absolute;
      width:min(22vw,150px);
      height:auto;
      opacity:0;
      transition:transform 1.3s cubic-bezier(.16,1,.3,1), opacity .9s ease;
      will-change:transform;
      pointer-events:none;
      transform:translateY(24px) scale(.86) rotate(-4deg);
    }

    body.loaded .logo-back{
      opacity:.92;
      transform:translateY(0) scale(1) rotate(0deg);
    }

    .logo-front{
      position:relative;
      width:min(38vw,260px);
      height:auto;
      transition:transform 1.5s cubic-bezier(.16,1,.3,1), opacity 1s ease, filter 1.2s ease;
      will-change:transform;
      opacity:0;
      filter:blur(8px);
      transform:translateY(-34px) scale(.72) rotate(6deg);
    }

    body.loaded .logo-front{
      opacity:1;
      filter:blur(0);
      transform:translateY(0) scale(1) rotate(0deg);
    }

    .hero-ambient{
      position:absolute;
      inset:0;
      pointer-events:none;
      z-index:0;
      opacity:0;
      transition:opacity 1.2s ease;
    }

    body.loaded .hero-ambient{ opacity:1; }

    .hero-ambient::before,
    .hero-ambient::after{
      content:"";
      position:absolute;
      border-radius:999px;
      filter:blur(36px);
      opacity:.45;
      animation:heroFloat 8s ease-in-out infinite;
    }

    .hero-ambient::before{
      width:28vw;
      height:28vw;
      min-width:220px;
      min-height:220px;
      left:50%;
      top:50%;
      transform:translate(-50%,-50%);
      background:rgba(255,255,255,.18);
    }

    .hero-ambient::after{
      width:18vw;
      height:18vw;
      min-width:140px;
      min-height:140px;
      left:50%;
      top:50%;
      transform:translate(-50%,-50%);
      background:rgba(49,67,66,.12);
      animation-delay:-4s;
    }

    @keyframes heroFloat{
      0%{ transform:translate(-50%,-50%) scale(1); }
      50%{ transform:translate(-50%, calc(-50% - 10px)) scale(1.04); }
      100%{ transform:translate(-50%,-50%) scale(1); }
    }

    .hero-text{
      position:absolute;
      left:50%;
      bottom:200px;
      transform:translateX(-50%) translateY(10px);
      max-width:520px;
      text-align:center;
      color:#6f766f;
      font-size:18px;
      line-height:1.45;
      letter-spacing:.03em;
      z-index:6;
      opacity:0;
      padding:0 20px;
      animation:heroTextReveal 1s cubic-bezier(.16,1,.3,1) forwards .45s;
    }

    @keyframes heroTextReveal{
      0%{ opacity:0; transform:translateX(-50%) translateY(18px); filter:blur(6px); }
      60%{ opacity:1; transform:translateX(-50%) translateY(-3px); filter:blur(0); }
      100%{ opacity:1; transform:translateX(-50%) translateY(0); filter:blur(0); }
    }

    .scroll-indicator{
      position:absolute;
      left:50%;
      bottom:70px;
      transform:translateX(-50%) translateY(10px);
      width:56px;
      height:auto;
      opacity:0;
      pointer-events:none;
      z-index:6;
      animation:scrollReveal .75s ease forwards 1.05s, scrollPulse 2.2s ease-in-out infinite 1.65s;
    }

    @keyframes scrollReveal{
      from{ opacity:0; transform:translateX(-50%) translateY(18px); }
      to{ opacity:.9; transform:translateX(-50%) translateY(0); }
    }

    @keyframes scrollPulse{
      0%{ transform:translateX(-50%) translateY(0); opacity:.9; }
      50%{ transform:translateX(-50%) translateY(6px); opacity:1; }
      100%{ transform:translateX(-50%) translateY(0); opacity:.9; }
    }

    .center-wrap {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      perspective: 1400px;
      position: relative;
      z-index: 2;
    }

    .main-card {
      z-index:5;
      transform: translateY(140px) scale(.88);
      opacity: 0;
      filter: blur(12px);
      transition: transform 1.1s cubic-bezier(.16,1,.3,1), opacity .9s ease, filter .9s ease;
      transform-style: preserve-3d;
      will-change: transform, opacity;
      position: relative;
    }

    .main-card::after{
      content:"";
      position:absolute;
      inset:-4% -4%;
      background: radial-gradient(circle at center, rgba(255,255,255,.09), transparent 65%);
      filter: blur(28px);
      z-index:-1;
      opacity:.5;
      pointer-events:none;
    }

    .main-card img {
      display: block;
      width: auto;
      height: auto;
      max-width: min(92vw, 1500px);
      max-height: 78vh;
      object-fit: contain;
      transform-origin: center center;
      transition: transform 220ms ease-out;
      user-select: none;
      -webkit-user-drag: none;
    }

    .section.active .main-card {
      transform: translateY(0);
      opacity: 1;
      filter: blur(0);
    }

    @keyframes cardBreathe{
      0%{ transform:translateY(0) scale(1); }
      50%{ transform:translateY(-2px) scale(1.008); }
      100%{ transform:translateY(0) scale(1); }
    }

    .section.active.is-resting .main-card{ animation: cardBreathe 6.2s ease-in-out infinite; }

    .side-plant{
      position:absolute;
      bottom:0;
      height:45vh;
      max-height:520px;
      width:auto;
      opacity:0;
      pointer-events:none;
      z-index:1;
      transition:transform 3.2s cubic-bezier(.16,1,.3,1), opacity 1.8s ease;
    }

    .side-plant.left{
      left:50%;
      transform-origin:bottom left;
      transform:translateX(-30%) scaleY(0) scaleX(.9);
    }

    .side-plant.right{
      left:50%;
      transform-origin:bottom right;
      transform:translateX(-70%) scaleY(0) scaleX(.9);
    }

    .section.active .side-plant{ opacity:.95; }
    .section.active .side-plant.left{ transform:translateX(-135%) scaleY(1) scaleX(1); }
    .section.active .side-plant.right{ transform:translateX(35%) scaleY(1) scaleX(1); }

    @keyframes plantSwayLeft{
      0%{ transform:translateX(-135%) scaleY(1) scaleX(1) rotate(-0.5deg); }
      50%{ transform:translateX(-135%) scaleY(1) scaleX(1) rotate(1deg); }
      100%{ transform:translateX(-135%) scaleY(1) scaleX(1) rotate(-0.5deg); }
    }

    @keyframes plantSwayRight{
      0%{ transform:translateX(35%) scaleY(1) scaleX(1) rotate(0.5deg); }
      50%{ transform:translateX(35%) scaleY(1) scaleX(1) rotate(-1deg); }
      100%{ transform:translateX(35%) scaleY(1) scaleX(1) rotate(0.5deg); }
    }

    .section.active.is-resting .side-plant.left{ animation: plantSwayLeft 4.5s ease-in-out infinite; }
    .section.active.is-resting .side-plant.right{ animation: plantSwayRight 4.5s ease-in-out infinite; }

    .ornament-grass{
      position:fixed;
      bottom:-2px;
      left:-2px;
      height:28vh;
      width:auto;
      pointer-events:none;
      opacity:.95;
      z-index:3;
      transform-origin:bottom left;
    }

    @keyframes grassSway{
      0%{ transform:rotate(-2deg) translateX(0); }
      50%{ transform:rotate(3deg) translateX(4px); }
      100%{ transform:rotate(-2deg) translateX(0); }
    }

    .section.jozefitow-section.active.is-resting .ornament-grass{ animation: grassSway 4.5s ease-in-out infinite; }

    .lea-section .center-wrap{ min-height:78vh; }
    .lea-scene{
      position:relative;
      width:min(92vw, 1020px);
      height:min(78vh, 720px);
      z-index:5;
      will-change:transform;
    }

    .lea-scene img{
      position:absolute;
      left:50%;
      user-select:none;
      -webkit-user-drag:none;
      pointer-events:none;
      transition:transform 260ms ease-out;
    }

    .lea-middle{
      top:50%;
      width:min(90vw, 1000px);
      z-index:2;
      transform:translate(-50%, -50%);
    }

    .lea-front{
      bottom:0;
      width:min(76vw, 650px);
      z-index:3;
      transform:translateX(-50%);
      filter:drop-shadow(0 10px 20px rgba(0,0,0,.15));
    }

    @keyframes cloudGelatin{
      0%{ transform:translateX(-50%) scale(1,1); }
      20%{ transform:translateX(-50%) scale(1.025,.97); }
      40%{ transform:translateX(-50%) scale(.985,1.02); }
      60%{ transform:translateX(-50%) scale(1.018,.985); }
      80%{ transform:translateX(-50%) scale(.992,1.01); }
      100%{ transform:translateX(-50%) scale(1,1); }
    }

    .section.active.is-resting .lea-front{ animation:cloudGelatin 7.5s ease-in-out infinite; }
    .section.active.is-resting .lea-scene{ animation: cardBreathe 6.2s ease-in-out infinite; }

    .mobile-only{ display:none; }
    .desktop-only{ display:block; }

    .label {
      position: absolute;
      left: 50%;
      bottom: 50px;
      transform: translateX(-50%) translateY(12px);
      text-align: center;
      z-index: 6;
      opacity: 0;
      transition: opacity .65s ease, transform .65s ease;
      padding: 0 18px;
      white-space: nowrap;
      width: max-content;
      max-width: calc(100vw - 40px);
      pointer-events:none;
    }

    .section.active.is-resting .label { opacity: 1; transform: translateX(-50%) translateY(0); }

    .label h2 { margin: 0; font-size: 24px; font-weight: 400; letter-spacing: .03em; }

    .pin-card{
      position:absolute;
      right:24px;
      bottom:24px;
      width:48px;
      height:48px;
      z-index:20;
      perspective:900px;
      transition:transform .24s ease;
    }

    .pin-card:hover{ transform:scale(1.06); }

    .pin-inner{
      position:relative;
      width:100%;
      height:100%;
      transform-style:preserve-3d;
      transition:transform .6s ease;
    }

    .pin-card:hover .pin-inner{ transform:rotateY(180deg); }

    .pin-face{
      position:absolute;
      inset:0;
      backface-visibility:hidden;
      display:flex;
      align-items:center;
      justify-content:center;
    }

    .pin-face img{
      width:100%;
      height:100%;
      display:block;
    }

    .pin-back{ transform:rotateY(180deg); }

    .pin-preview{
      position:absolute;
      right:60px;
      bottom:4px;
      width:220px;
      padding:12px;
      border-radius:14px;
      background:rgba(10,10,10,.86);
      color:#fff;
      font-family:'Roboto', sans-serif;
      backdrop-filter:blur(10px);
      box-shadow:0 12px 30px rgba(0,0,0,.28);
      opacity:0;
      transform:translateY(6px) scale(.96);
      transition:opacity .22s ease, transform .22s ease;
      pointer-events:none;
      overflow:hidden;
    }

    .pin-preview::before{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(135deg, rgba(255,255,255,.08), transparent 45%);
      pointer-events:none;
    }

    .pin-card:hover .pin-preview,
    .pin-card:focus-visible .pin-preview{
      opacity:1;
      transform:translateY(0) scale(1);
    }

    .pin-preview-label{
      position:relative;
      font-size:11px;
      letter-spacing:.12em;
      text-transform:uppercase;
      opacity:.72;
      margin-bottom:8px;
    }

    .pin-preview-thumb{
      position:relative;
      width:100%;
      aspect-ratio:16/10;
      border-radius:10px;
      overflow:hidden;
      background:
        linear-gradient(180deg, rgba(120,150,180,.55), rgba(60,70,80,.2) 38%, rgba(50,50,50,.15) 39%, rgba(70,70,70,.18) 100%),
        repeating-linear-gradient(-24deg, rgba(255,255,255,.08) 0 10px, rgba(255,255,255,0) 10px 20px),
        linear-gradient(180deg, #8395a7 0%, #65788a 42%, #4c555c 43%, #6f6f6f 100%);
      border:1px solid rgba(255,255,255,.08);
    }

    .pin-preview-thumb::before{
      content:"Street View";
      position:absolute;
      left:10px;
      top:10px;
      font-size:12px;
      letter-spacing:.08em;
      text-transform:uppercase;
      background:rgba(0,0,0,.46);
      padding:5px 7px;
      border-radius:999px;
    }

    .pin-preview-thumb::after{
      content:"↗";
      position:absolute;
      right:12px;
      bottom:10px;
      width:28px;
      height:28px;
      display:flex;
      align-items:center;
      justify-content:center;
      border-radius:999px;
      background:rgba(0,0,0,.42);
      font-size:18px;
    }

    .pin-preview-title{
      position:relative;
      margin-top:9px;
      font-size:14px;
      line-height:1.25;
      opacity:.96;
    }

    .insta{
      position:fixed;
      left:20px;
      top:20px;
      width:26px;
      height:26px;
      z-index:50;
      color:#000;
      opacity:0;
      transform:translateY(-6px);
      animation:instaFade .9s ease forwards .6s;
      transition:opacity .35s ease, color .35s ease, transform .25s ease, backdrop-filter .35s ease, background .35s ease, padding .35s ease, border-radius .35s ease;
    }

    .insta.second{ top:60px; }
    body:not(.first) .insta{
      color:#fff;
      backdrop-filter:blur(6px);
      background:rgba(0,0,0,.15);
      padding:6px;
      border-radius:8px;
    }

    body.last .insta{ opacity:0 !important; pointer-events:none; }
    .insta:hover{ transform:scale(1.12); }
    .insta svg{ width:100%; height:100%; display:block; fill:currentColor; }
    @keyframes instaFade{ to{ opacity:1; transform:translateY(0); } }

    .end-section{ font-family:'Roboto', sans-serif; }
    .end-text{ font-size:28px; max-width:700px; line-height:1.4; opacity:.9; }

    .portfolio-link-wrap{ position:relative; display:inline-flex; align-items:center; justify-content:center; }
    .portfolio-link{
      position:relative;
      font-size:22px;
      text-decoration:none;
      color:#fff;
      font-family:'Roboto', sans-serif;
      display:inline-block;
      padding-bottom:6px;
      z-index:2;
    }

    .portfolio-link::after{
      content:"";
      position:absolute;
      left:0;
      bottom:0;
      width:100%;
      height:2px;
      background:#1673ff;
      transform:scaleX(0);
      transform-origin:left center;
      transition:transform .28s ease;
    }

    .portfolio-link:hover::after{ transform:scaleX(1); }

    .spark{
      position:absolute;
      width:18px;
      height:18px;
      opacity:0;
      pointer-events:none;
      transform:scale(.4) rotate(0deg);
      z-index:1;
    }

    .spark-left{ left:-16px; top:-8px; }
    .spark-right{ right:-18px; bottom:4px; }
    .portfolio-link-wrap:hover .spark-left{ animation:sparkLeft 560ms cubic-bezier(.16,1,.3,1) forwards; }
    .portfolio-link-wrap:hover .spark-right{ animation:sparkRight 620ms cubic-bezier(.16,1,.3,1) forwards 40ms; }

    @keyframes sparkLeft{
      0%{ opacity:0; transform:translate(0,0) scale(.3) rotate(-8deg); }
      35%{ opacity:1; transform:translate(-6px,-10px) scale(1.05) rotate(8deg); }
      100%{ opacity:0; transform:translate(-12px,-18px) scale(.72) rotate(16deg); }
    }

    @keyframes sparkRight{
      0%{ opacity:0; transform:translate(0,0) scale(.3) rotate(8deg); }
      35%{ opacity:1; transform:translate(8px,-6px) scale(1.02) rotate(-6deg); }
      100%{ opacity:0; transform:translate(16px,-14px) scale(.7) rotate(-14deg); }
    }

    .end-socials{ display:flex; gap:16px; margin-top:10px; }
    .end-socials .social-icon{ width:28px; height:28px; color:#fff; opacity:.9; transition:transform .2s ease, opacity .2s ease; }
    .end-socials .social-icon:hover{ transform:scale(1.08); opacity:1; }
    .end-socials .social-icon svg{ width:100%; height:100%; fill:currentColor; display:block; }

    .frog-audio{
      position:relative;
      display:inline-block;
      cursor:pointer;
    }

    .frog-audio > img:not(.spark){
      transition:transform .3s ease, filter .3s ease;
    }

    .frog-audio:hover > img:not(.spark){
      transform:scale(1.04);
      filter:drop-shadow(0 0 14px rgba(120,220,140,.35));
    }

    .frog-audio .spark{
      width:22px;
      height:22px;
      opacity:0;
      pointer-events:none;
    }

    .frog-audio .spark-left{ left:-10px; top:-10px; }
    .frog-audio .spark-right{ right:-10px; bottom:-10px; }
    .frog-audio:hover .spark-left{ animation:sparkLeft 980ms cubic-bezier(.16,1,.3,1) forwards; }
    .frog-audio:hover .spark-right{ animation:sparkRight 1120ms cubic-bezier(.16,1,.3,1) forwards 120ms; }

    .frog-audio.playing > img:not(.spark){
      filter:drop-shadow(0 0 18px rgba(255,255,255,.55));
      transform:scale(1.05);
    }

    .frog-hint{
      position:absolute;
      left:50%;
      top:calc(100% + 10px);
      transform:translateX(-50%);
      font-family:'Roboto', sans-serif;
      font-size:12px;
      letter-spacing:.08em;
      text-transform:uppercase;
      color:rgba(255,255,255,.72);
      opacity:0;
      transition:opacity .25s ease, transform .25s ease;
      white-space:nowrap;
      pointer-events:none;
    }

    .frog-audio:hover .frog-hint{
      opacity:1;
      transform:translateX(-50%) translateY(-2px);
    }

    @media (max-width: 900px) {
      .hero-text{ bottom:180px; max-width:460px; font-size:17px; }
      .scroll-indicator{ bottom:72px; }
      .section { padding: 20px; }
      .main-card img { max-width: 94vw; max-height: 68vh; }
      .label { bottom: 50px; }
      .label h2 { font-size: 24px; }
      .side-plant{ height:34vh; }
    }

    @media (max-width:640px){
      .desktop-only{ display:none; }
      .mobile-only{ display:block; }
      .main-card { transform: translateY(70px) scale(.95); }
      .main-card img { max-width: 92vw; max-height: 62vh; }
      .label { bottom:50px; max-width: calc(100vw - 24px); }
      .label h2 { font-size: 24px; }
      .side-plant{ height:28vh; }
      .ornament-grass{ height:18vh; }
      .lea-section .center-wrap{ min-height:72vh; }
      .lea-scene{ width:94vw; height:68vh; }
      .lea-middle{ width:min(94vw, 760px); top:48%; transform:translate(-50%, -50%); }
      .lea-front{ width:min(78vw, 420px); left:50%; bottom:0; top:auto; transform:translateX(-50%); }
      .hero-logos{ align-items:flex-start; padding-top:64px; }
      .logo-front{ width:min(56vw,220px); }
      .logo-back{ width:min(30vw,120px); }
      .hero-text{
        bottom:110px;
        max-width:88vw;
        font-size:15px;
        line-height:1.38;
        padding:0 18px;
      }
      .scroll-indicator{ bottom:48px; width:48px; }
      .end-text{ font-size:22px; }
      .pin-card{ right:16px; bottom:16px; width:44px; height:44px; }
      .pin-preview{ width:180px; right:50px; bottom:0; padding:10px; }
      .pin-preview-title{ font-size:13px; }
      .frog-hint{ font-size:11px; }
    }
  

/* === REVEAL SLIDERS === */
.wrapper {
  height: 100dvh;
  min-height: 100svh;
  -webkit-overflow-scrolling: touch;
}

.reveal-wrap {
  width: min(92vw, 1500px);
  max-width: min(92vw, 1500px);
  --reveal: 0%;
  --overlay-opacity: 1;
}

.reveal-stage {
  position: relative;
  width: 100%;
  height: min(78vh, 860px);
  overflow: hidden;
  touch-action: none;
  user-select: none;
  background: transparent;
}

.reveal-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.reveal-base {
  z-index: 1;
  clip-path: inset(0 calc(100% - var(--reveal)) 0 0);
}

.reveal-overlay {
  z-index: 2;
  opacity: var(--overlay-opacity);
}

.reveal-handle {
  position: absolute;
  left: var(--reveal);
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 3;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: grab;
  display: grid;
  place-items: center;
}

.reveal-stage.dragging .reveal-handle,
.reveal-handle:active {
  cursor: grabbing;
}

.reveal-handle img {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.label-row {
  position: absolute;
  left: 50%;
  bottom: 50px;
  transform: translateX(-50%) translateY(12px);
  width: min(760px, 90vw);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  z-index: 24;
  opacity: 0;
  transition: opacity .65s ease, transform .65s ease;
}

.section.active.is-resting .label-row {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.label-row .label {
  position: relative;
  left: auto;
  bottom: auto;
  transform: none;
  text-align: left;
  z-index: auto;
  opacity: 1;
  transition: none;
  padding: 0;
  white-space: normal;
  width: auto;
  max-width: calc(100% - 88px);
  pointer-events: none;
}

.label-row .label h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: .03em;
  line-height: 1.08;
}

.label-row .pin-card {
  position: relative;
  right: auto;
  bottom: auto;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  z-index: 25;
}

@media (max-width: 900px) {
  .section {
    min-height: 100dvh;
    padding: 18px 16px 24px;
  }

  .reveal-stage {
    height: min(70vh, 720px);
  }

  .label-row {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 90px);
    width: calc(100vw - 32px);
  }
}

@media (max-width: 640px) {
  .section {
    min-height: 100dvh;
    padding: 14px 12px 22px;
  }

  .reveal-stage {
    height: min(62vh, 560px);
  }

  .reveal-handle {
    width: 56px;
    height: 56px;
    bottom: 12px;
  }

  .reveal-handle img {
    width: 56px;
    height: 56px;
  }

  .label-row {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 124px);
    width: calc(100vw - 24px);
    gap: 16px;
  }

  .label-row .label {
    max-width: calc(100% - 82px);
  }

  .label-row .label h2 {
    font-size: 20px;
    line-height: 1.1;
  }

  .label-row .pin-card {
    width: 52px;
    height: 52px;
    flex-basis: 52px;
  }

  .label-row .pin-preview {
    display: none;
  }
}

@media (max-width: 390px) {
  .reveal-stage {
    height: min(58vh, 500px);
  }

  .label-row {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 112px);
  }

  .label-row .label h2 {
    font-size: 18px;
  }
}

/* ===== FIX: caption stays truly centered, pin stays right ===== */
.center-wrap {
  position: relative;
}

.main-card {
  width: min(700px, 78vw);
  margin-inline: auto;
}

.reveal-base,
.reveal-overlay {
  transform: none !important;
}

.reveal-stage img.reveal-base,
.reveal-stage img.reveal-overlay {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* keep the whole caption row centered; make the pin absolute so it doesn't push text left */
.label-row {
  position: absolute;
  left: 50%;
  bottom: 50px;
  transform: translateX(-50%) translateY(0);
  width: min(760px, 90vw);
  min-height: 52px;
  z-index: 24;
  opacity: 1;
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
  display: block;
}

.section.active .label-row,
.section.active.is-resting .label-row {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* This overrides the older .section.active.is-resting .label rule that was double-shifting the title left */
.label-row .label,
.section.active .label-row .label,
.section.active.is-resting .label-row .label {
  position: static !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  opacity: 1 !important;
  transition: none !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 72px 0 0 !important;
  text-align: center !important;
  white-space: normal !important;
  pointer-events: none !important;
}

.label-row .label h2,
.section.active .label-row .label h2,
.section.active.is-resting .label-row .label h2 {
  text-align: center !important;
}

/* pin fixed to the right edge of the row */
.label-row .pin-card {
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 52px;
  height: 52px;
  z-index: 25;
  pointer-events: auto;
}

/* no Street View popup */
.pin-preview {
  display: none !important;
}

/* restored decorative extras */
.side-plant {
  position: absolute;
  bottom: 4%;
  height: min(34vh, 260px);
  width: auto;
  opacity: 0;
  z-index: 5;
  pointer-events: none;
  transition: transform 3.2s cubic-bezier(.16,1,.3,1), opacity 1.8s ease;
}

.side-plant.left {
  left: max(1vw, 8px);
  transform-origin: bottom left;
  transform: translateX(-30%) scaleY(0) scaleX(.9);
}

.side-plant.right {
  right: max(1vw, 8px);
  transform-origin: bottom right;
  transform: translateX(30%) scaleY(0) scaleX(.9);
}

.section.active .side-plant {
  opacity: .95;
}
.section.active .side-plant.left {
  transform: translateX(0) scaleY(1) scaleX(1);
}
.section.active .side-plant.right {
  transform: translateX(0) scaleY(1) scaleX(1);
}

.ornament-grass {
  position: absolute;
  left: 50%;
  bottom: 0;
  height: min(18vh, 140px);
  width: auto;
  transform: translateX(-50%);
  z-index: 6;
  pointer-events: none;
}

.lea-front {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(32vw, 240px);
  height: auto;
  transform: translateX(-50%);
  z-index: 7;
  pointer-events: none;
}

@media (max-width: 900px) {
  .main-card {
    width: min(660px, 82vw);
  }
  .label-row {
    width: calc(100vw - 32px);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 90px);
  }
  .side-plant {
    height: min(28vh, 180px);
  }
}

@media (max-width: 640px) {
  .main-card {
    width: min(92vw, 620px);
  }
  .label-row {
    width: calc(100vw - 24px);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 124px);
    min-height: 44px;
  }
  .label-row .label,
  .section.active .label-row .label,
  .section.active.is-resting .label-row .label {
    padding-right: 60px !important;
  }
  .label-row .label h2 {
    font-size: 20px !important;
    line-height: 1.1;
  }
  .label-row .pin-card {
    width: 44px;
    height: 44px;
  }
  .side-plant {
    height: min(22vh, 110px);
    bottom: 8%;
  }
  .ornament-grass {
    height: min(16vh, 96px);
  }
  .lea-front {
    width: min(40vw, 170px);
  }
}


/* ===== FINAL PATCH: centered images, no enlargement, original grass/cloud placement ===== */

/* keep image cards centered and remove scale/breathing enlargement */
.main-card,
.section.active .main-card,
.section.active.is-resting .main-card {
  width: min(700px, 78vw) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  transform: translateY(0) !important;
  animation: none !important;
}

.reveal-wrap,
.reveal-stage {
  margin-left: auto !important;
  margin-right: auto !important;
}

.reveal-stage {
  display: block !important;
}

.reveal-stage img.reveal-base,
.reveal-stage img.reveal-overlay {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  transform: none !important;
}

/* caption truly centered; pin absolutely on the right so it never pushes text */
.label-row,
.section.active .label-row,
.section.active.is-resting .label-row {
  position: absolute !important;
  left: 50% !important;
  bottom: 50px !important;
  transform: translateX(-50%) !important;
  width: min(760px, 90vw) !important;
  min-height: 52px !important;
  display: block !important;
  opacity: 1 !important;
  z-index: 24 !important;
}

.label-row .label,
.section.active .label-row .label,
.section.active.is-resting .label-row .label {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 72px 0 0 !important;
  margin: 0 auto !important;
  text-align: center !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

.label-row .label h2,
.section.active .label-row .label h2,
.section.active.is-resting .label-row .label h2 {
  text-align: center !important;
}

.label-row .pin-card,
.section.active .label-row .pin-card,
.section.active.is-resting .label-row .pin-card {
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  top: auto !important;
}

/* restore decorative background extras like before */
.center-wrap {
  position: relative !important;
}

.side-plant {
  position: absolute !important;
  bottom: 0 !important;
  height: 45vh !important;
  max-height: 520px !important;
  width: auto !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: 1 !important;
  transition: transform 3.2s cubic-bezier(.16,1,.3,1), opacity 1.8s ease !important;
}

.side-plant.left {
  left: 50% !important;
  right: auto !important;
  transform-origin: bottom left !important;
  transform: translateX(-30%) scaleY(0) scaleX(.9) !important;
}

.side-plant.right {
  left: 50% !important;
  right: auto !important;
  transform-origin: bottom right !important;
  transform: translateX(-70%) scaleY(0) scaleX(.9) !important;
}

.section.active .side-plant {
  opacity: .95 !important;
}
.section.active .side-plant.left {
  transform: translateX(-135%) scaleY(1) scaleX(1) !important;
}
.section.active .side-plant.right {
  transform: translateX(35%) scaleY(1) scaleX(1) !important;
}

.ornament-grass {
  position: fixed !important;
  bottom: -2px !important;
  left: -2px !important;
  height: 28vh !important;
  width: auto !important;
  opacity: .95 !important;
  z-index: 3 !important;
  transform-origin: bottom left !important;
  pointer-events: none !important;
}

.lea-front {
  position: absolute !important;
  left: 50% !important;
  bottom: 0 !important;
  width: min(76vw, 650px) !important;
  height: auto !important;
  z-index: 3 !important;
  transform: translateX(-50%) !important;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.15)) !important;
  pointer-events: none !important;
}

@media (max-width: 900px) {
  .main-card,
  .section.active .main-card,
  .section.active.is-resting .main-card {
    width: min(660px, 82vw) !important;
  }

  .label-row,
  .section.active .label-row,
  .section.active.is-resting .label-row {
    width: calc(100vw - 32px) !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 90px) !important;
  }

  .side-plant {
    height: 28vh !important;
    max-height: 180px !important;
  }
}

@media (max-width: 640px) {
  .main-card,
  .section.active .main-card,
  .section.active.is-resting .main-card {
    width: min(92vw, 620px) !important;
  }

  .label-row,
  .section.active .label-row,
  .section.active.is-resting .label-row {
    width: calc(100vw - 24px) !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 124px) !important;
    min-height: 44px !important;
  }

  .label-row .label,
  .section.active .label-row .label,
  .section.active.is-resting .label-row .label {
    padding-right: 60px !important;
  }

  .label-row .pin-card,
  .section.active .label-row .pin-card,
  .section.active.is-resting .label-row .pin-card {
    width: 44px !important;
    height: 44px !important;
  }

  .side-plant {
    height: 22vh !important;
    max-height: 110px !important;
  }

  .ornament-grass {
    height: 16vh !important;
  }

  .lea-front {
    width: min(40vw, 170px) !important;
  }
}


/* hover motion without scale */
.main-card,
.section.active .main-card,
.section.active.is-resting .main-card{
  transform-origin:center center;
  will-change:transform, filter;
}

.main-card:hover{
  filter: drop-shadow(0 14px 34px rgba(0,0,0,.18));
}

.reveal-base,
.reveal-overlay,
.reveal-stage img.reveal-base,
.reveal-stage img.reveal-overlay{
  transform:none !important;
}

/* frog */
.frog-audio-trigger{
  position:absolute;
  left:50%;
  bottom:120px;
  transform:translateX(-50%);
  width:118px;
  height:118px;
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
  z-index:18;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .24s ease, filter .24s ease;
}

.frog-audio-trigger:hover,
.frog-audio-trigger:focus-visible{
  transform:translateX(-50%) translateY(-2px);
  filter:drop-shadow(0 0 18px rgba(178,255,160,.42));
  outline:none;
}

.frog-audio-trigger .frog-glow{
  position:absolute;
  inset:18px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(164,255,154,.28) 0%, rgba(164,255,154,.12) 38%, rgba(164,255,154,0) 72%);
  opacity:0;
  transform:scale(.84);
  transition:opacity .22s ease, transform .22s ease;
  pointer-events:none;
}

.frog-audio-trigger:hover .frog-glow,
.frog-audio-trigger:focus-visible .frog-glow,
.frog-audio-trigger.playing .frog-glow{
  opacity:1;
  transform:scale(1);
}

.frog-icon{
  position:relative;
  width:86px;
  height:86px;
  display:block;
  fill:#4f7f3b;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.24));
  transition:transform .22s ease, fill .22s ease, filter .22s ease;
  z-index:2;
}

.frog-audio-trigger:hover .frog-icon,
.frog-audio-trigger:focus-visible .frog-icon{
  transform:translateY(-2px) rotate(-2deg);
  fill:#5f9545;
  filter:drop-shadow(0 0 10px rgba(180,255,170,.24)) drop-shadow(0 8px 16px rgba(0,0,0,.24));
}

.frog-stars{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
}

.frog-star{
  position:absolute;
  color:#f8f5c6;
  text-shadow:0 0 10px rgba(255,247,162,.45);
  opacity:0;
  transform:scale(.5);
}

.star-a{ top:8px; left:22px; font-size:16px; }
.star-b{ top:2px; right:18px; font-size:20px; }
.star-c{ top:22px; right:2px; font-size:13px; }

.frog-audio-trigger:hover .frog-star,
.frog-audio-trigger:focus-visible .frog-star,
.frog-audio-trigger.playing .frog-star{
  animation:frogSparkle 1.15s ease-in-out infinite;
}

.frog-audio-trigger:hover .star-b,
.frog-audio-trigger:focus-visible .star-b,
.frog-audio-trigger.playing .star-b{ animation-delay:.16s; }

.frog-audio-trigger:hover .star-c,
.frog-audio-trigger:focus-visible .star-c,
.frog-audio-trigger.playing .star-c{ animation-delay:.34s; }

@keyframes frogSparkle{
  0%{ opacity:0; transform:translateY(6px) scale(.55) rotate(0deg); }
  25%{ opacity:1; transform:translateY(-2px) scale(1) rotate(6deg); }
  55%{ opacity:.92; transform:translateY(-8px) scale(1.08) rotate(-4deg); }
  100%{ opacity:0; transform:translateY(-16px) scale(.65) rotate(10deg); }
}

@media (max-width:900px){
  .frog-audio-trigger{ bottom:150px; width:102px; height:102px; }
  .frog-icon{ width:76px; height:76px; }
}

@media (max-width:640px){
  .frog-audio-trigger{ bottom:158px; width:92px; height:92px; }
  .frog-icon{ width:68px; height:68px; }
  .star-a{ top:10px; left:16px; }
  .star-b{ top:4px; right:12px; }
  .star-c{ top:18px; right:0; }
}


/* ===== restore explainer section as second screen ===== */
.howto-section{
  color:#111;
}

.howto-wrap{
  position:relative;
  width:min(1100px, 92vw);
  min-height:100vh;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:24px;
  padding:28px 0 78px;
  overflow:hidden;
}

.howto-gif{
  width:min(860px, 100%);
  max-height:78vh;
  height:auto;
  display:block;
  object-fit:contain;
  border-radius:42px;
  box-shadow:none !important;
  filter:none !important;
}

.howto-scroll-indicator{
  position:absolute;
  left:50%;
  bottom:20px;
  width:58px;
  height:auto;
  transform:translateX(-50%);
  animation:howtoBob 1.7s ease-in-out infinite;
  opacity:.96;
  z-index:5;
  pointer-events:none;
}

@keyframes howtoBob{
  0%,100%{ transform:translateX(-50%) translateY(0); }
  50%{ transform:translateX(-50%) translateY(9px); }
}

@media (max-width: 900px){
  .howto-wrap{
    width:min(94vw, 860px);
    min-height:100vh;
    padding:20px 0 72px;
  }

  .howto-gif{
    max-height:74vh;
    border-radius:28px;
  }

  .howto-scroll-indicator{
    width:50px;
    bottom:18px;
  }
}


/* ===== Fix explainer section: one scroll = one page, no gif cutoff ===== */
.lea-front{
  display:none !important;
}

.howto-section{
  padding: 0 !important;
}

.howto-wrap{
  position: relative !important;
  width: min(1100px, 92vw) !important;
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  padding: 16px 0 84px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.howto-gif{
  width: min(860px, 100%) !important;
  max-width: 100% !important;
  max-height: calc(100vh - 150px) !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  box-shadow: none !important;
  filter: none !important;
}

.howto-scroll-indicator{
  position: absolute !important;
  left: 50% !important;
  bottom: 18px !important;
  transform: translateX(-50%) !important;
  width: 58px !important;
  height: auto !important;
  opacity: .96 !important;
  z-index: 5 !important;
}

@media (max-width: 900px){
  .howto-wrap{
    width: min(94vw, 860px) !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    padding: 12px 0 78px !important;
  }

  .howto-gif{
    max-height: calc(100vh - 138px) !important;
  }

  .howto-scroll-indicator{
    width: 50px !important;
    bottom: 16px !important;
  }
}

@media (max-width: 640px){
  .howto-wrap{
    width: min(94vw, 760px) !important;
    padding: 10px 0 74px !important;
  }

  .howto-gif{
    max-height: calc(100vh - 128px) !important;
  }

  .howto-scroll-indicator{
    bottom: 14px !important;
  }
}


/* ===== fix live-like hover on monster cards ===== */
.main-card,
.section.active .main-card,
.section.active.is-resting .main-card{
  transform-style: preserve-3d !important;
  will-change: transform !important;
  transition: transform .12s ease !important;
}



/* ===== MOBILE POLISH ON THE CORRECT REVEAL + EXPLAINER BASE ===== */

/* remove Lea 36a cloud */
.lea-front{
  display:none !important;
}

@media (max-width: 900px){
  .section{
    min-height: 100svh !important;
    height: 100svh !important;
    padding: 20px 14px !important;
  }

  /* hero */
  .hero{
    max-width: 100% !important;
    height: 100% !important;
  }

  .hero-text{
    bottom: 150px !important;
    max-width: min(92vw, 560px) !important;
    font-size: 17px !important;
    line-height: 1.38 !important;
    padding: 0 12px !important;
  }

  .scroll-indicator{
    bottom: 18px !important;
    width: 50px !important;
  }

  /* reveal cards */
  .main-card{
    transform: translateY(56px) scale(.95) !important;
  }

  .section.active .main-card{
    transform: translateY(0) scale(.95) !important;
  }

  .section.active.is-resting .main-card{
    transform: translateY(0) scale(.95) !important;
  }

  .main-card img{
    max-width: 88vw !important;
    max-height: 63svh !important;
  }

  .reveal-stage{
    width: min(88vw, 560px) !important;
  }

  .reveal-handle{
    width: 56px !important;
    height: 56px !important;
    bottom: 12px !important;
  }

  .reveal-handle img{
    width: 100% !important;
    height: 100% !important;
  }

  /* labels + pin */
  .label-row{
    width: calc(100vw - 18px) !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 92px) !important;
    gap: 10px !important;
  }

  .label-row .label{
    max-width: calc(100% - 72px) !important;
  }

  .label-row .label h2{
    font-size: 22px !important;
    line-height: 1.05 !important;
  }

  .label-row .pin-card{
    width: 44px !important;
    height: 44px !important;
  }

  /* explainer */
  .howto-section{
    padding: 0 !important;
  }

  .howto-wrap{
    width: min(94vw, 760px) !important;
    min-height: 100svh !important;
    height: 100svh !important;
    max-height: 100svh !important;
    padding: 10px 0 70px !important;
    gap: 0 !important;
    justify-content: center !important;
  }

  .howto-gif{
    width: min(100%, 760px) !important;
    max-width: 100% !important;
    max-height: calc(100svh - 112px) !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 26px !important;
  }

  .howto-scroll-indicator{
    width: 48px !important;
    bottom: 14px !important;
  }

  /* frog */
  .frog-audio-trigger{
    width: 96px !important;
    height: 96px !important;
    min-width: 96px !important;
    min-height: 96px !important;
  }

  .frog-icon{
    width: 68px !important;
    height: 68px !important;
    object-fit: contain !important;
  }
}

@media (max-width: 640px){
  .section{
    padding: 16px 10px !important;
  }

  .hero-text{
    bottom: 138px !important;
    max-width: min(92vw, 500px) !important;
    font-size: 16px !important;
  }

  .scroll-indicator{
    width: 46px !important;
    bottom: 14px !important;
  }

  .main-card{
    transform: translateY(52px) scale(.94) !important;
  }

  .section.active .main-card,
  .section.active.is-resting .main-card{
    transform: translateY(0) scale(.94) !important;
  }

  .main-card img{
    max-width: 90vw !important;
    max-height: 59svh !important;
  }

  .reveal-stage{
    width: min(90vw, 480px) !important;
  }

  .reveal-handle{
    width: 60px !important;
    height: 60px !important;
  }

  .label-row{
    width: calc(100vw - 12px) !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 104px) !important;
  }

  .label-row .label{
    max-width: calc(100% - 66px) !important;
  }

  .label-row .label h2{
    font-size: 20px !important;
  }

  .label-row .pin-card{
    width: 42px !important;
    height: 42px !important;
  }

  .howto-wrap{
    width: min(94vw, 680px) !important;
    padding: 8px 0 66px !important;
  }

  .howto-gif{
    max-height: calc(100svh - 104px) !important;
    border-radius: 22px !important;
  }

  .howto-scroll-indicator{
    width: 46px !important;
    bottom: 12px !important;
  }

  .frog-audio-trigger{
    width: 90px !important;
    height: 90px !important;
    min-width: 90px !important;
    min-height: 90px !important;
  }

  .frog-icon{
    width: 64px !important;
    height: 64px !important;
  }
}