/* ============================================================
   CONTACT

   The paper is built from real geometry (assets/contact/paper-
   reference.svg, 724×295) rather than one flattened image: a main
   sheet (the writing area) up to a dashed tear-line, then 3 individual
   pull-tabs sitting past it, each one a real link with its own icon
   (mail/instagram/linkedin — behance's icon exists in assets/contact/
   icons/behance.svg for later, but has no tab yet, per Clara).
   Built by initContactTicket() in main.js.

   Wall texture: reversed from how it first shipped — it should be
   fully visible right where the projects folders end, then fade to
   transparent by the bottom of this section, not the other way round.
   ============================================================ */

.contact {
  position: relative;
  display: flex;
  justify-content: center;
  padding: var(--space-7) var(--gutter);
  background: var(--color-bg);
  /* No overflow:hidden here — .contact itself is only as wide as the
     site's shared content column (the base `section` rule), and this
     would clip the wall background's full-bleed escape (below) right
     at that narrower edge instead of letting it reach the true
     viewport edges. */
}

/* Full-bleed (100vw + centering-offset, same trick as the folder
   stack): .contact itself only spans the shared content width via the
   site's base `section` rule, so inset:0 here was only ever covering
   that narrower box, not the true viewport width. */
.contact::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(100vw - var(--sbw, 0px));
  left: 50%;
  margin-left: calc(-50vw + var(--sbw, 0px) / 2);
  background: url('../assets/contact/wall-texture.webp') center / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 0%, black 80%, transparent 100%);
}

.contact__ticket-wrap {
  position: relative;
  z-index: 1;
}

.contact__ticket {
  position: relative;
  width: clamp(320px, 49.8vw, 720px);
  aspect-ratio: 724 / 295;
  /* The dashed tear-line, at the same x the paper SVG has it
     (550.978 / 724). Everything from here to the right edge is the
     tab area; everything to the left is the writing area. */
  --divider-x: 76.1%;
}

/* Writing area — solid paper up to the dashed line. The tab area to
   its right is NOT part of this: each tab paints its own paper colour
   (see .contact__tab-remnant/.contact__tab below), so a torn-off tab
   can reveal the section's own background there instead of paper. */
.contact__ticket::before {
  content: "";
  position: absolute;
  inset: 0;
  right: calc(100% - var(--divider-x));
  background: #FFF3A8;
  box-shadow: 0 2px 3px rgba(0,0,0,0.15);
}

/* The dashed divider itself — kept quiet (low opacity + multiply, so
   it reads as a faint printed guideline, not a UI element competing
   with the tabs) rather than a crisp, high-contrast dashed border. */
.contact__ticket::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--divider-x);
  width: 0;
  border-left: 1.5px dashed #45322B;
  opacity: 0.3;
  mix-blend-mode: multiply;
}

.contact__prompt {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--divider-x);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6%;
  text-align: center;
}

.contact__prompt-text {
  font-family: var(--font-headline);
  font-style: italic;
  font-size: clamp(1.1rem, 2.2vw, 2rem);
  line-height: 1.25;
  text-wrap: pretty;
}

/* Blinking caret, shown only while main.js's typewriter reveal
   (initContactPromptTypewriter) is actively typing this element's
   content — a plain ::after so it never interferes with the real text
   nodes JS is appending. */
.contact__prompt-text.is-typing::after {
  content: "|";
  margin-left: 0.05em;
  animation: contact-caret-blink 0.8s steps(1) infinite;
}

@keyframes contact-caret-blink {
  50% { opacity: 0; }
}

/* ---------- Tabs ----------
   Vertical bands measured from the paper SVG (out of its 295 total
   height): tab ≈91.25 units tall, gap ≈6.13 units, first tab starts
   ≈1.665 units down — expressed below as % of 295, one slot per tab.
   Each slot stacks two children at the identical spot: a static
   "remnant" (the torn edge left on the sheet, permanently zigzag —
   see below) sitting behind the actual tab link, which is a plain
   flat rectangle AT REST (fully hiding the remnant, reading as one
   unbroken sheet) and only becomes the zigzag itself once torn
   (hover/focus/press) — that's also what exposes the remnant
   underneath in the notches the zigzag opens up. */
.contact__tab-slot {
  position: absolute;
  left: var(--divider-x);
  width: calc(100% - var(--divider-x));
}

.contact__tab-slot[data-tab="mail"] { top: 0.6%; height: 30.9%; }
.contact__tab-slot[data-tab="instagram"] { top: 33.6%; height: 30.9%; }
.contact__tab-slot[data-tab="linkedin"] { top: 66.6%; height: 30.9%; }

.contact__tab-remnant,
.contact__tab {
  position: absolute;
  inset: 0;
}

/* This is the torn-off edge left behind on the sheet — it only ever
   shows up in the triangular notches the tab's own clip-path opens up
   once torn (below), so it can just permanently be the zigzag shape;
   the tab covers it completely whenever it's flat/at rest. */
.contact__tab-remnant {
  background: #FFF3A8;
  clip-path: polygon(
    0% 0%, 8% 8.3%, 0% 16.7%, 8% 25%, 0% 33.3%, 8% 41.7%, 0% 50%,
    8% 58.3%, 0% 66.7%, 8% 75%, 0% 83.3%, 8% 91.7%, 0% 100%,
    100% 100%, 100% 0%
  );
}

.contact__tab {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFF3A8;
  color: #45322B;
  text-decoration: none;
  /* At rest: a plain flat rectangle (every left-edge point pinned to
     0%) — flush against the divider, reading as one unbroken sheet.
     Same point count/order as the torn shape below so clip-path can
     interpolate between the two instead of jump-cutting. No shadow at
     rest either, for the same "still joined" reason. */
  clip-path: polygon(
    0% 0%, 0% 8.3%, 0% 16.7%, 0% 25%, 0% 33.3%, 0% 41.7%, 0% 50%,
    0% 58.3%, 0% 66.7%, 0% 75%, 0% 83.3%, 0% 91.7%, 0% 100%,
    100% 100%, 100% 0%
  );
  transition: transform var(--dur-medium) var(--ease-out),
    filter var(--dur-medium) var(--ease-out),
    clip-path var(--dur-medium) var(--ease-out);
}

.contact__tab svg {
  width: 24%;
  height: auto;
  overflow: visible;
}

/* Only NOW (hover/focus/press) does the edge actually zigzag, the
   tab lift away, and the shadow appear — the moment of tearing. */
.contact__tab:hover,
.contact__tab:focus-visible,
.contact__tab:active {
  clip-path: polygon(
    0% 0%, 8% 8.3%, 0% 16.7%, 8% 25%, 0% 33.3%, 8% 41.7%, 0% 50%,
    8% 58.3%, 0% 66.7%, 8% 75%, 0% 83.3%, 8% 91.7%, 0% 100%,
    100% 100%, 100% 0%
  );
  transform: translateX(10%) rotate(4deg);
  filter: drop-shadow(3px 4px 6px rgba(0,0,0,0.35));
}

.contact__tab:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ---------- Mobile: rotate the PAPER 90°, like a physical ticket
   turned on its side — but not its content. .contact__ticket (this
   rule) carries the paper shape (the ::before/::after pseudo-elements,
   the tab slots' backgrounds) and rotates as a rigid whole; the text
   and icons inside counter-rotate -90° right below so they stay
   upright and readable while still sitting in the same (now-rotated)
   slots.
   --ticket-mobile-w is the visual WIDTH once rotated (== the ticket's
   own unrotated HEIGHT); the ticket's own width is derived from it
   (×724/295) so it fills the rotated footprint exactly, and the wrap
   reserves that same footprint (aspect-ratio swapped) so nothing
   clips or overlaps surrounding sections. ---------- */
@media (max-width: 640px) {
  .contact__ticket-wrap {
    /* Deliberately smaller than the available space — Clara wants the
       whole composition (paper, icons, text) to read as one compact
       object sitting on the wall, not filling the screen. Everything
       else on mobile (ticket width, icon size, prompt font-size) is
       already tied to this one variable, so shrinking it scales the
       whole thing down together. */
    --ticket-mobile-w: clamp(150px, 40vw, 210px);
    width: var(--ticket-mobile-w);
    aspect-ratio: 295 / 724;
  }

  .contact__ticket {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--ticket-mobile-w) * 724 / 295);
    transform: translate(-50%, -50%) rotate(90deg);
  }

  /* Counter-rotate the icon in place — icons are small and roughly
     square, so rotating just the glyph (not its box) needs no extra
     sizing work. */
  .contact__tab svg {
    transform: rotate(-90deg);
  }

  /* The prompt's OUTER box (.contact__prompt) stays as the parent
     positions it — that's what keeps it correctly slotted into the
     rotated paper. Only the INNER text span counter-rotates, and gets
     an explicit width in real px (the rotated visual width, from
     --ticket-mobile-w) instead of inheriting the outer box's own
     (wrong-axis, landscape-shaped) percentage width — otherwise the
     un-rotated text would wrap for a wide-short box and overflow the
     now narrow-tall paper. */
  .contact__prompt-text {
    display: block;
    transform: rotate(-90deg);
    width: calc(var(--ticket-mobile-w) * 0.82);
    /* Bigger than the desktop clamp's floor (tuned for a much wider
       landscape ticket) so the line breaks across several short
       lines and actually fills the paper, per Clara — "Pick your /
       favorite / way to / say hi" rather than one small line. Tied to
       --ticket-mobile-w so it still scales with the paper itself. */
    font-size: calc(var(--ticket-mobile-w) * 0.185);
    line-height: 1.15;
  }
}