/* ============================================================================
   PAGE: REACH OUT (reach-out.html)
   Sections: proximity-weight title + paper-plane flight hero ·
             light-sweep statement with brutalist stickers ·
             glass form (floating labels, live states, send animation) +
             contact tiles with copy action and a dotted globe
   Every pattern here is unique to this page (see README → "No repeated sections").
   ============================================================================ */

@layer sections {

  /* ===================== HERO ===================== */
  .ct-hero {
    position: relative;
    isolation: isolate;
    overflow: clip;
    min-height: clamp(26rem, 74svh, 46rem);
    display: grid;
    align-items: end;
    padding-block: calc(var(--header-h) + 3rem) clamp(3rem, 6vw, 5rem);
  }
  @media (max-width: 699px) { .ct-hero { min-height: 16rem; padding-bottom: 2.5rem; } }   /* phones: title higher, no empty band above it */
  .ct-hero__inner { position: relative; z-index: 1; }
  .ct-hero__title {
    font-size: clamp(3.6rem, 1rem + 13vw, 13.5rem);
    font-weight: 350;
    letter-spacing: -.055em;
    line-height: .88;
  }
  /* Letters (split by JS): weight + lift are driven per letter */
  .ct-hero__title .ch {
    display: inline-block;
    font-weight: var(--w, 350);
    translate: 0 var(--lift, 0);
    transition: font-weight .35s var(--ease-out), translate .35s var(--ease-out), color .35s;
  }
  .ct-hero__title .ch.is-hot { color: var(--accent); }
  .ct-hero__title .ch--space { inline-size: .25em; }

  /* Flight path box: fixed coordinate system (600×360) scaled per breakpoint,
     so the CSS offset-path() coordinates always match the drawn SVG path. */
  .flight {
    position: absolute;
    z-index: 0;
    inline-size: 600px;
    block-size: 360px;
    inset-block-start: calc(var(--header-h) + 1rem);
    inset-inline-end: max(var(--gutter), (100vw - 1280px) / 2);
    transform-origin: top right;
    scale: 1.1;
    pointer-events: none;
  }
  @media (max-width: 1199px) { .flight { scale: .8; } }
  @media (max-width: 699px)  { .flight { scale: .5; opacity: .75; inset-inline-end: 0; } }
  .flight__path { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; }
  .flight__path path {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2;
    stroke-dasharray: 2 12;
    stroke-linecap: round;
    opacity: .7;
  }
  .flight__plane {
    position: absolute;
    top: 0;
    left: 0;
    inline-size: 72px;
    offset-path: path("M20 300 C 140 300 160 80 300 80 S 520 260 420 300 S 260 200 360 120 S 560 40 590 60");
    offset-rotate: auto;
    offset-anchor: center;
    offset-distance: 100%;
    filter: drop-shadow(0 10px 12px rgb(42 20 104 / .3));
  }
  .flight__plane-top  { fill: var(--k-amber); }
  .flight__plane-fold { fill: var(--k-orange); }
  /* soft organic glow behind the flight */
  .flight::before {
    content: "";
    position: absolute;
    inset: 10% 15%;
    border-radius: var(--blob);
    background: radial-gradient(circle, rgb(156 10 94 / .22), transparent 70%);
    filter: blur(20px);
  }

  /* ===================== STATEMENT: LIGHT SWEEP ===================== */
  .sweep { background: var(--bg-alt); }
  .sweep__text {
    font-size: clamp(1.6rem, 1rem + 2.7vw, 3.4rem);
    font-weight: 600;
    letter-spacing: -.03em;
    line-height: 1.6;                    /* room for the stickers' border + shadow between lines */
    max-inline-size: 30ch;
    /* The sweep mask clips to this box: give the stickers' border + offset
       shadow room at the bottom/right edge, without moving the layout. */
    padding: 0 .2em .25em 0;
    margin: 0 -.2em -.25em 0;
  }
  /* Phones: stickers wrap onto stacked lines → a little more air between them */
  @media (max-width: 599px) { .sweep__text { line-height: 1.75; } }
  .sticker {
    font-size: .9em;                     /* a slightly shorter box, so wrapped stickers never touch */
    padding: 0 .28em;
    margin-inline: .05em;
    border: 2px solid var(--line);
    border-radius: .22em;
    background: var(--k-amber);
    color: #1a1130;
    box-shadow: .1em .1em 0 var(--line);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    font-weight: 400;
    letter-spacing: -.01em;
  }
  .sticker--fire { background: var(--k-orange); }

  /* ===================== FORM + DETAILS ===================== */
  .reach__grid { display: grid; gap: clamp(3rem, 6vw, 5rem); align-items: start; }
  @media (min-width: 960px) {
    .reach__grid { grid-template-columns: 1.55fr 1fr; row-gap: 0; }
    /* Title gets its own row, so the form card and the details start on the same line */
    .reach__form { display: contents; }
    .reach__title { grid-column: 1; grid-row: 1; }
    .form-card    { grid-column: 1; grid-row: 2; }
    .reach__info  { grid-column: 2; grid-row: 2; }
  }
  @media (max-width: 959px) { .reach__info { order: -1; } }   /* details first on small screens */

  .reach__title {
    font-size: var(--fs-xl);
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1;
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  }

  /* Liquid-glass card */
  .form-card {
    position: relative;
    padding: clamp(1.25rem, 3.5vw, 2.75rem);
    border-radius: calc(var(--radius) * 1.2);
    background: var(--surface);
    border: 1px solid var(--glass-edge);
    box-shadow: inset 0 1px 0 var(--glass-shine), var(--shadow-soft);
    backdrop-filter: blur(18px) saturate(1.5);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
  }
  .form-card::before {           /* organic colour behind the glass */
    content: "";
    position: absolute;
    z-index: -1;
    inline-size: 60%;
    aspect-ratio: 1;
    inset-block-start: -12%;
    inset-inline-end: -10%;
    border-radius: var(--blob);
    background: var(--grad-brand);
    opacity: .28;
    filter: blur(40px);
  }

  .contact-form { display: grid; gap: 1rem; }
  @media (min-width: 640px) {
    .contact-form { grid-template-columns: 1fr 1fr; }
    .field--wide { grid-column: 1 / -1; }
  }

  .field { position: relative; }
  .field input,
  .field textarea {
    inline-size: 100%;
    padding: 1.65rem 3rem .6rem 1.1rem;
    border: 2px solid var(--ink-mute);
    border-radius: 1rem;
    background: var(--surface-solid);
    color: var(--ink);
    font: inherit;
    font-size: var(--fs-md);
    transition: border-color .3s, box-shadow .3s, background-color .3s;
  }
  .field textarea {
    field-sizing: content;          /* grows with the text (modern browsers) */
    min-block-size: 10rem;
    max-block-size: 26rem;
    resize: vertical;
    line-height: 1.55;
  }
  .field label {
    position: absolute;
    inset-inline-start: 1.15rem;
    inset-block-start: 1.15rem;
    color: var(--ink-soft);
    pointer-events: none;
    transform-origin: left top;
    transition: translate .3s var(--ease-out), scale .3s var(--ease-out), color .3s;
  }
  .field :is(input, textarea):is(:focus, :not(:placeholder-shown)) + label {
    translate: 0 -.7rem;
    scale: .74;
    color: var(--accent);
    font-weight: 600;
  }
  .field :is(input, textarea):hover { border-color: color-mix(in oklab, var(--accent) 45%, transparent); }
  .field :is(input, textarea):focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 22%, transparent);
  }

  /* Validity states (set by JS after the first interaction) */
  .field__ok {
    position: absolute;
    inset-inline-end: 1rem;
    inset-block-start: 1.15rem;
    inline-size: 1.3rem;
    fill: none;
    stroke: var(--k-orange);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 24;
    stroke-dashoffset: 24;
    transition: stroke-dashoffset .5s var(--ease-out);
  }
  .field.is-valid .field__ok { stroke-dashoffset: 0; }
  .field.is-invalid :is(input, textarea) { border-color: #d6336c; }

  .field__meter {
    position: absolute;
    inset-inline: 1rem;
    inset-block-end: 6px;
    block-size: 3px;
    border-radius: 3px;
    background: var(--grad-fire);
    transform-origin: left;
    scale: var(--fill, 0) 1;
    transition: scale .3s var(--ease-out);
  }

  /* Honeypot: off-screen, never focusable */
  .hp { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }

  /* Send button: gradient pill with an amber "well" holding a paper plane */
  /* Submit button centred under the form */
  .form-submit { display: flex; justify-content: center; }
  .send-btn {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    min-block-size: 3.8rem;
    padding: .4rem .4rem .4rem 1.8rem;
    border-radius: var(--radius-pill);
    background: var(--grad-k);
    color: #fbf6ee;
    font-weight: 600;
    font-size: var(--fs-md);
    overflow: hidden;
    transition: box-shadow .4s, translate .4s var(--ease-out);
  }
  .send-btn:hover { box-shadow: 0 18px 36px -14px rgb(156 10 94 / .7); translate: 0 -2px; }
  .send-btn__label { transition: opacity .3s, translate .4s var(--ease-out); }
  .send-btn__icon {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: 3rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--grad-fire);
    color: #1a1130;
  }
  .send-btn__icon::before {          /* the well expands over the button while sending */
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--grad-fire);
    transition: scale .6s var(--ease-out);
  }
  .send-btn__icon svg { grid-area: 1 / 1; inline-size: 1.25rem; }
  .send-btn__plane { fill: currentColor; transition: translate .6s var(--ease-out), rotate .4s var(--ease-out), opacity .4s; }
  .send-btn__check { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .5s var(--ease-out) .3s; }
  .send-btn:hover .send-btn__plane { rotate: -12deg; translate: 2px -2px; }
  .send-btn.is-sending .send-btn__icon::before { scale: 12; }
  .send-btn.is-sending .send-btn__label { opacity: 0; translate: -1rem 0; }
  .send-btn.is-sending .send-btn__plane { translate: 3rem -3rem; opacity: 0; }
  .send-btn.is-sent .send-btn__plane { opacity: 0; }
  .send-btn.is-sent .send-btn__check { stroke-dashoffset: 0; }
  .send-btn:disabled { cursor: progress; }

  /* Contact tiles */
  .info-list { display: grid; gap: .9rem; }
  .info-tile {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border-radius: 1.25rem;
    border: 2px solid var(--ink-mute);
    background: var(--surface-solid);
    transition: border-color .3s, box-shadow .35s var(--ease-out), translate .35s var(--ease-out);
  }
  .info-tile:hover { border-color: var(--line); box-shadow: 6px 6px 0 var(--line); translate: -3px -3px; }
  .info-tile p { font-size: var(--fs-sm); overflow-wrap: break-word; min-inline-size: 0; }
  .info-tile a { font-weight: 600; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size .35s var(--ease-out), color .3s; }
  .info-tile a:hover { color: var(--accent); background-size: 100% 1.5px; }
  .info-tile__icon {
    display: grid;
    place-items: center;
    inline-size: 3.6rem;
    aspect-ratio: 1;
    border-radius: var(--blob);
    background: var(--bg-alt);
    box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--accent) 35%, transparent);
    transition: rotate .5s var(--ease-spring), border-radius .6s;
  }
  .info-tile__icon img { inline-size: 2.2rem; block-size: auto; }
  :root[data-theme="dark"] .info-tile__icon { background: #f5eee4; }   /* keeps the dark PNG icons readable */
  .info-tile:hover .info-tile__icon { rotate: -10deg; border-radius: 50%; }

  .copy-btn {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: 2.75rem;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 2px solid var(--line);
    color: var(--ink);
    transition: background-color .3s, color .3s, scale .3s var(--ease-spring);
  }
  .copy-btn:hover { background: var(--ink); color: var(--bg); }
  .copy-btn:active { scale: .9; }
  .copy-btn svg { grid-area: 1 / 1; inline-size: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: opacity .25s, scale .3s var(--ease-spring); }
  .copy-btn__done { opacity: 0; scale: .4; stroke-width: 3; }
  .copy-btn.is-copied { background: var(--k-amber); border-color: var(--k-amber); color: #1a1130; }
  .copy-btn.is-copied .copy-btn__copy { opacity: 0; scale: .4; }
  .copy-btn.is-copied .copy-btn__done { opacity: 1; scale: 1; }

  /* Dotted globe */
  .globe { inline-size: min(100%, 17rem); margin: clamp(2rem, 4vw, 3rem) auto 0; }
  .globe svg { inline-size: 100%; block-size: auto; overflow: visible; }
  .globe__body { fill: var(--surface-solid); }
  #globeDots circle { fill: color-mix(in oklab, var(--accent) 55%, transparent); }
  .globe__dots { transform-box: fill-box; }
  .globe__line { fill: none; stroke: var(--ink-mute); stroke-width: 1.2; }
  .globe__rim { fill: none; stroke: var(--line); stroke-width: 2; }
  .globe__pin path { fill: var(--k-orange); stroke: #1a1130; stroke-width: 1.5; }
  .globe__pulse { fill: none; stroke: var(--k-orange); stroke-width: 2; transform-box: fill-box; transform-origin: center; opacity: 0; }
  @media (max-width: 959px) { .globe { display: none; } }   /* details stay compact on top */
}

/* ===================== MOTION ===================== */
@layer motion {
  @keyframes ch-drop   { from { opacity: 0; translate: 0 -.6em; rotate: -8deg; } }
  @keyframes ch-wave   { 0%, 100% { font-weight: 300; } 40% { font-weight: 800; } }
  @keyframes fly {
    0%   { offset-distance: 0%;   opacity: 0; }
    8%   { opacity: 1; }
    88%  { opacity: 1; }
    100% { offset-distance: 100%; opacity: 0; }
  }
  @keyframes march     { to { stroke-dashoffset: -140; } }
  @keyframes sweep-in  { from { mask-position: 100% 0; } to { mask-position: 0 0; } }
  @keyframes shake     { 20%, 60% { translate: -6px 0; } 40%, 80% { translate: 6px 0; } }
  @keyframes globe-spin { to { transform: translateX(-50%); } }
  @keyframes pin-pulse { from { opacity: .9; scale: .6; } to { opacity: 0; scale: 2.8; } }
  @keyframes pin-bob   { 50% { translate: 0 -4px; } }

  @media (prefers-reduced-motion: no-preference) {
    .ct-hero__title .ch { animation: ch-drop .9s var(--ease-spring) both; animation-delay: calc(var(--c, 0) * 60ms + 150ms); }
    /* Touch screens: no pointer to follow → a weight wave rolls through */
    @media (hover: none) {
      .ct-hero__title .ch { animation: ch-drop .9s var(--ease-spring) both, ch-wave 3.6s ease-in-out infinite; animation-delay: calc(var(--c, 0) * 60ms + 150ms), calc(var(--c, 0) * 140ms + 1.4s); }
    }

    .flight__plane { animation: fly 9s cubic-bezier(.45, 0, .55, 1) infinite; }
    .flight__path path { animation: march 6s linear infinite; }

    /* Statement: a diagonal light sweep uncovers the text */
    .is-ready [data-sweep] {
      -webkit-mask-image: linear-gradient(100deg, #000 42%, rgb(0 0 0 / .14) 58%);
      mask-image: linear-gradient(100deg, #000 42%, rgb(0 0 0 / .14) 58%);
      -webkit-mask-size: 260% 100%;
      mask-size: 260% 100%;
      mask-repeat: no-repeat;
      mask-position: 100% 0;
      transition: mask-position 1.8s var(--ease-out), -webkit-mask-position 1.8s var(--ease-out);
    }
    .is-ready [data-sweep].is-in { mask-position: 0 0; -webkit-mask-position: 0 0; }
    @supports (animation-timeline: view()) {
      .is-ready [data-sweep] { transition: none; animation: sweep-in linear both; animation-timeline: view(); animation-range: entry 20% cover 48%; }
    }

    .field.is-shake { animation: shake .45s ease-in-out; }

    .globe__dots { animation: globe-spin 22s linear infinite; }
    .globe__pulse { animation: pin-pulse 2.2s ease-out infinite; }
    .globe__pin { animation: pin-bob 3s ease-in-out infinite; }
  }
}