/* ===========================================================================
   Cassette Footer — component styles (ported 1:1 from preview.html)

   These class names get scoped/isolated by CSS Modules, so nothing here
   leaks onto the rest of the page. Original kebab-case class names were
   converted to camelCase so they can be referenced as styles.xxx in the TSX.

   The color + animation tokens live on .footerWrap (the component root)
   instead of :root, so the component carries its own variables wherever it
   is dropped.
   =========================================================================== */

.s_HcbYEHaL2uDYzJ3W7w {
  /* ----- COLOR TOKENS (from the exported SVGs) ----- */
  --coral: #de6a58;   /* page / footer background */
  --body:  #ffebba;   /* cassette body */
  --line:  #b13128;   /* outlines */
  --ink:   #cd564e;   /* red text + hearts */
  --trak:  #b9736e;   /* tape track */
  --white: #ffffff;
  --heart: var(--ink);   /* hearts follow the text/ink colour */
  --dot:   #e67169;
  --lid:   #fdf7e7;

  /* ----- ANIMATION DIALS ----- */
  --persp:      1500px;            /* (1) 3D depth — lower = more dramatic */
  --zoom-start: 1.3;               /* (2) zoom-in at start. Kept modest so cassette*zoom stays < viewport width (no horizontal scrollbar). */
  --cassette-w: min(40rem, 68vw);  /* (3) cassette size — drives EVERYTHING (art, text, links) proportionally. Smaller than before. */
  --anchor-gap: 5vh;               /* (4) gap from the bottom of the screen */
  --track-h:    4rem;              /* (5) height of the white ground track */

  /* The real seam line sits inside the SVG viewBoxes, not at their edges. */
  --seam-origin: 99.083%;          /* hinge line within the SIDE / rig */
  --bottom-top:  98.657%;          /* puts the bottom's top line on the seam */

  position: relative;              /* containing block for the mobile static track/shadow */
  overflow-x: clip;                /* never let the (3D) cassette push the page wider → no horizontal scrollbar */
  color: var(--ink);
  /* Transparent by default — the footer sits on the host page's own background.
     A fill can still be set via the optional `background` colour prop. */
}

/* ===== FOOTER STAGE =====
   Default / standalone: a 100vh stage that ScrollTrigger PINS — the cassette
   rises to the screen centre, folds, and lands at the bottom (the "before" look). */
.CIb53shFHcAiR9nMbGZ4 {
  height: 100vh; position: relative; overflow: hidden; z-index: 2;
  perspective: var(--persp); perspective-origin: 50% 50%;
}

/* ===== "PIN THEM TOGETHER" mode (classes added by JS when the footer is dropped
   inside a [data-cassette-pin] wrapper that also holds the social/contact block).
   The footer fills the space BELOW that block, and the cassette is allowed to rise
   UP out of its box into the social area as it travels to the screen centre. ===== */
.FQ7MlnQMi5fLSqR0Y1D7 { flex: 1 1 auto; min-height: 0; width: 100%; align-self: stretch; overflow: visible; }   /* fill the remaining height; stay full-width even if the wrapper centres its items; let the full-bleed track escape */
.Jil8Sy7_9EG0RIDKmpRB {
  /* FULL-VIEWPORT stage anchored to the bottom — its perspective-origin (50% 50%)
     then sits at the SCREEN CENTRE, exactly where the cassette folds, so the 3D fold
     renders the same in every browser (Firefox was distorting it into a boxy shape
     when the perspective origin was off-centre). offTop then measures 0 — maths unchanged. */
  position: absolute; left: 0; right: 0; bottom: 0; height: 100vh;
  overflow: visible;                                          /* cassette may rise above the box to reach screen centre */
  pointer-events: none;                                       /* click-through so the pinned social block stays interactive */
}
.Jil8Sy7_9EG0RIDKmpRB .hL_5Tku_NS3Z1SKQtOoQ { pointer-events: auto; }                  /* the cassette itself stays clickable */
/* Full-bleed white ground track: even when the footer lives inside a width-constrained
   container (e.g. Webflow's container-large), the track breaks out to span the WHOLE
   viewport. Needs `overflow-x: clip` on page-wrapper/body to absorb the 100vw scrollbar. */
.Jil8Sy7_9EG0RIDKmpRB .M8N7qPOZo9vItzi2_oFu { left: 50%; right: auto; width: 100vw; transform: translateX(-50%); }

/* ----------------------------------------------------------------
   HINGE: .rig rotates about its BOTTOM edge (the shared hinge).
     • .side   — bottom edge on hinge, pre-folded rotateX(90deg) (hidden)
     • .bottom — TOP edge on hinge (top:100%), rotateX(0) faces camera
   Animating .rig rotationX 0 -> -90 swings the SIDE up to face you.
   ---------------------------------------------------------------- */
.hL_5Tku_NS3Z1SKQtOoQ {
  position: absolute; top: 0; left: 50%;
  margin-left: calc(var(--cassette-w) / -2);  /* centre via CSS margin, not GSAP xPercent — Firefox mis-measures
                                                  the width at set-time, leaving the cassette off to the right.
                                                  GSAP now only drives y / scale / rotation. */
  width: var(--cassette-w);
  aspect-ratio: 1097 / 705;               /* SIDE proportions */
  transform-style: preserve-3d;
  transform-origin: 50% var(--seam-origin);
  /* No will-change: transform — Firefox mis-composites the perspective of a
     will-change'd preserve-3d element, distorting the fold into a boxy shape.
     The browser auto-promotes the animated transform anyway. */
  z-index: 2;   /* cassette sits above the ground track + shadow */
}
.g8RgfEa1uUe5tgLDRWav { position: absolute; backface-visibility: hidden; -webkit-backface-visibility: hidden; }

/* No container-type here: it creates a containment/stacking context that Firefox
   renders incorrectly inside the 3D fold (the cassette looked distorted/boxy).
   The text overlays size off --cassette-w directly instead of cqw. */
.T5JGrqYtWJgrAl1B8Sxg   { inset: 0; transform-origin: 50% var(--seam-origin); transform: rotateX(90deg); }
.UUHC2kWneKoHL189N4jJ { left: 0; top: var(--bottom-top); width: 100%; aspect-ratio: 1097 / 189;
          transform-origin: 50% 1.587%; transform: rotateX(0deg); }

/* both artwork SVGs fill their face exactly (face aspect = viewBox aspect) */
.LkPa144SAJbuxU21YrGN, .FjhxLN8EsGuqqR_VxoTB, .tq_zuSgQsmaIr5ArksCQ { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.FjhxLN8EsGuqqR_VxoTB { display: none; }   /* mobile-only background SVG; shown via the media query */

/* white ground track — strip at the bottom of the stage; wipes in L->R.
   `left/right:0` (not 100vw) avoids a horizontal scrollbar from the scrollbar width. */
.M8N7qPOZo9vItzi2_oFu {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--track-h);
  background: #fff; z-index: 0; pointer-events: none;
  clip-path: inset(0 100% 0 0);
}
/* subtle contact shadow — sits on the track at the cassette base; fades in on landing */
.eEOQVRlOr1Sp2ro9q8xx {
  position: absolute; bottom: 0.5rem;
  left: 50%; margin-left: calc(var(--cassette-w) * -0.5);
  width: var(--cassette-w); height: 50px;
  background: radial-gradient(ellipse at center, rgba(60,14,9,.66), rgba(60,14,9,0) 78%);
  filter: blur(8px); opacity: 0; pointer-events: none; z-index: 1;
}

/* ============================================================
   BOTTOM: moving tape behind the exact shell (windows = holes)
   ============================================================ */
.yVExwgLrqZuaFjHAHwik {
  position: absolute; left: 1%; right: 1%; top: 14%; height: 72%;
  background: var(--trak); overflow: hidden; z-index: 1;
}
._Cbn3wHLvlLhD5wbz1UE {
  position: absolute; inset: -2px; width: 200%;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 1px, rgba(255,255,255,0) 1px 7px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.10) 0 1px, rgba(0,0,0,0) 1px 13px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 2px, rgba(255,255,255,0) 2px 23px);
  opacity: 0.6;
  /* NOTE: no mix-blend-mode / will-change here. Both force this (and its sibling
     the title, inside the same .tape group) onto a separate compositing surface
     that Firefox re-rasterises a frame late, so the title trails the fold.
     Plain opacity keeps the tape group on the main thread, in sync everywhere. */
}
.LjAYxhaKwrwSbqt6aVSk {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: "Ranchers", cursive; color: var(--white);
  /* width-relative size instead of cqw, so .bottom no longer needs a containment
     context (container-type) — one less thing forcing a separate paint layer. */
  font-size: calc(var(--cassette-w) * 0.055); letter-spacing: .03em; white-space: nowrap;
  /* The slide is driven by a CSS variable (GSAP animates --title-x from 95 to -95),
     so the BROWSER resolves the % against the real width every frame. Firefox was
     mis-resolving GSAP's own xPercent (width measured before layout settled). */
  transform: translateX(calc(var(--title-x, 95) * 1%));
}
.tq_zuSgQsmaIr5ArksCQ { z-index: 2; }   /* cream shell on top; holes reveal the tape */

/* ============================================================
   SIDE: SVG artwork + real text/link overlays + spinnable hearts
   (overlay positions are % of the 1097x710 viewBox)
   ============================================================ */
.T5JGrqYtWJgrAl1B8Sxg .LkPa144SAJbuxU21YrGN, .T5JGrqYtWJgrAl1B8Sxg .FjhxLN8EsGuqqR_VxoTB { z-index: 0; }
.T5JGrqYtWJgrAl1B8Sxg a { color: var(--ink); text-decoration: none; }

/* DOMOV | KONTAKT */
.Eez8kca8hcuuA6KrybsU { position: absolute; left: 11.19%; right: 10.98%; top: 10.9%; height: 7%;
           display: flex; justify-content: space-between; align-items: center; }
.Eez8kca8hcuuA6KrybsU a { font-family: "Ranchers", cursive; font-size: calc(var(--cassette-w) * 0.0195); letter-spacing: .04em; }
.Eez8kca8hcuuA6KrybsU a:hover { opacity: .75; }
.MCQAwIaleasu5uEJgwOu { display: none; }   /* unused for now — every width shows DOMOV (kept so the Webflow prop still exists) */
.wERn8fMXaf7HtGL57ore { display: none; position: absolute; left: 11.19%; right: 10.98%; height: calc(var(--cassette-w) * 0.003); background: var(--ink); }

/* email | phone | phone (between the two SVG divider lines) */
.MC99BUYpNGczFdiQaZZn { position: absolute; left: 11.19%; right: 10.98%; top: 18.3%; height: 8%;
              display: flex; justify-content: space-between; align-items: center; gap: calc(var(--cassette-w) * 0.02);
              font-family: "Maiden Orange", serif; }
/* email + phone numbers: plain links, no hover animation (they're info, not actions you
   "press" on desktop — mailto/tel). */
.MC99BUYpNGczFdiQaZZn a { font-size: calc(var(--cassette-w) * 0.034); white-space: nowrap; }

/* nav column (left) */
.z4c6LcbVBUr5cXTcKpdv { position: absolute; left: 11.19%; top: 35.2%; display: flex; flex-direction: column;
       gap: calc(var(--cassette-w) * 0.012); font-family: "Maiden Orange", serif; }
.z4c6LcbVBUr5cXTcKpdv a { font-size: calc(var(--cassette-w) * 0.0165); letter-spacing: .04em; transition: transform .15s ease, opacity .15s ease; }
.z4c6LcbVBUr5cXTcKpdv a:hover { transform: translateX(3px); opacity: .8; }

/* legal (bottom-right of the white label) */
.pK28JM6eBv3ht31JOCO_ { position: absolute; right: 10.98%; top: 68.5%; display: flex; gap: calc(var(--cassette-w) * 0.022);
            font-family: "Maiden Orange", serif; }
.pK28JM6eBv3ht31JOCO_ a { font-size: calc(var(--cassette-w) * 0.015);
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0% 0.12em;
  padding-bottom: 0.06em; transition: background-size .4s ease; }
.pK28JM6eBv3ht31JOCO_ a:hover { background-size: 100% 0.12em; }

/* the two hearts, extracted from the SVG, spinnable about their centre */
.rzdDX6XCHm6ICVQnDwI3 { position: absolute; width: 11.6%; height: 15.4%; transform-origin: 50% 50%; z-index: 1; }
.po2cQZpJFFprxGkF7icd { left: 24.5%; top: 39.1%; }
.bWvp_t_dBcnDmFPu2FqW { left: 63.3%; top: 39.1%; }
.rzdDX6XCHm6ICVQnDwI3 svg { width: 100%; height: 100%; display: block; }

/* ===== Mobile (<=600px): SAME fold animation as desktop — only the face
   content changes: near-full-width cassette, no nav column, rows moved down,
   bigger legal links. The desktop .art SVG stays (its square bottom edge is
   the fold seam); only its baked divider lines swap for the HTML .hline pair,
   which sit where the MOVED rows are. ===== */
@media (max-width: 600px) {
  .s_HcbYEHaL2uDYzJ3W7w { --cassette-w: calc(100vw - 2.5rem); }   /* side gaps match the page's padding-global (1.25rem each side) */

  /* mobile face: hide nav, move the top group down, bigger legal */
  .z4c6LcbVBUr5cXTcKpdv { display: none; }
  .LkPa144SAJbuxU21YrGN .LKrRwPZZP0984WL5DGNS { display: none; }   /* hide the SVG divider lines (baked at the DESKTOP row positions)... */
  .wERn8fMXaf7HtGL57ore { display: block; }            /* ...and use the HTML lines that sit at the moved rows */
  .atMhoqUY1xxCNAFSHCSV { top: 21.67%; }
  .afXMFr950xMcfEF4fq5Q { top: 29.73%; }
  .Eez8kca8hcuuA6KrybsU    { top: 14.3%; }            /* DOMOV + KONTAKT — group centred in the band above the reels */
  .MC99BUYpNGczFdiQaZZn { top: 21.7%; }            /* email + phones */
  .pK28JM6eBv3ht31JOCO_   { top: calc(68.5% - 3px); }/* original spot, nudged up 3px */
  .pK28JM6eBv3ht31JOCO_ a { font-size: calc(var(--cassette-w) * 0.02); }       /* legal links a little bigger */
}

/* ===== Reduced motion (any width): no fold/pin — static Side resting on the
   track. This is the old mobile static layout, now serving as the
   accessibility fallback everywhere (the JS fold branch only runs under
   prefers-reduced-motion: no-preference). ===== */
@media (prefers-reduced-motion: reduce) {
  .s_HcbYEHaL2uDYzJ3W7w { height: auto; min-height: 0; overflow: visible; perspective: none; }
  .CIb53shFHcAiR9nMbGZ4 {
    position: relative; inset: auto; height: auto; overflow: visible; z-index: 2;
    perspective: none;                       /* static — no 3D */
    padding: 0 0 calc(var(--track-h) / 2);   /* cassette bottom rests at the track's middle */
  }
  .UUHC2kWneKoHL189N4jJ { display: none; }
  .LkPa144SAJbuxU21YrGN   { display: none; }      /* swap to the fully-rounded body SVG (no fold seam to meet) */
  .FjhxLN8EsGuqqR_VxoTB  { display: block; }
  .T5JGrqYtWJgrAl1B8Sxg  { transform: none !important; }
  .hL_5Tku_NS3Z1SKQtOoQ   { position: relative; left: auto; transform: none !important; margin: 0 auto; aspect-ratio: 1097 / 705; }

  /* static white track (background) + contact shadow at the footer bottom */
  .M8N7qPOZo9vItzi2_oFu {
    display: block; position: absolute; left: 0; bottom: 0; width: 100%;
    height: var(--track-h); clip-path: none; z-index: 0;
  }
  .eEOQVRlOr1Sp2ro9q8xx {
    display: block; position: absolute; left: 50%; margin-left: calc(var(--cassette-w) * -0.5);
    width: var(--cassette-w); height: 50px; bottom: calc(var(--track-h) / 2 - 1.5rem);
    opacity: .85; z-index: 1;
  }
}