/* /materiais and the free generators. Page-scoped chrome only: the sheets
   themselves are styled by lesson_content.css, the same stylesheet the PDF
   uses, loaded alongside this one from the page's :head. Nothing here may
   restyle a block — the whole point is that a visitor sees what the
   photocopier gets. */

@layer features {

  /* ── Hero ─────────────────────────────────────────────────────────────
     Copy centred, real sheets drifting in both gutters. The centre column is
     kept clear on purpose: the cards are evidence in the corner of the eye,
     and the moment they cross the text the page stops being readable. */
  .landing-page .mat-hero {
    position: relative;
    overflow: hidden;
  }
  .landing-page .mat-hero__copy {
    position: relative;
    z-index: var(--z-base, 0);
    text-align: center;
    /* Narrower than the usual wrap: the two 18rem gutters take 36rem of the
       row, and the copy has to keep clear of both without the cards ever
       touching a letter. */
    max-width: 38rem;
  }
  .landing-page .mat-hero__copy .lp-lede {
    margin-inline: auto;
  }
  .landing-page .mat-hero__note {
    font-size: 0.95rem;
    color: var(--color-ink-subtle);
  }

  .landing-page .mat-scatter {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .landing-page .mat-scatter__col {
    position: absolute;
    top: 0;
    width: 18rem;
    height: 100%;
    /* Room for the tilt: a card rotated 3° pushes its corners about 13px past
       its own box, and the column clips at its border. Without this the cards
       lose the very borders that make them read as sheets. */
    padding-inline: var(--space-4);
    overflow: hidden;
    /* Fades the cards out at both ends so they read as drifting past, not as a
       column that got cut. */
    mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  }
  /* Both columns sit fully inside the viewport. Bleeding them off the edge
     cuts the cards' own borders and clips their text mid-word, which reads as
     a broken layout rather than as motion; the drift is what carries the life
     anyway. */
  .landing-page .mat-scatter__col--left {
    left: 0;
  }
  .landing-page .mat-scatter__col--right {
    right: 0;
  }

  .landing-page .mat-scatter__track {
    display: grid;
    animation: mat-drift-y 55s linear infinite;
  }
  /* The same drift played backwards. A second set of keyframes for the opposite
     direction is one declaration written twice. */
  .landing-page .mat-scatter__col--right .mat-scatter__track {
    animation-duration: 65s;
    animation-direction: reverse;
  }

  /* Every drifting thing on this page is one move on one axis. Each track holds
     two copies of its cards, so travelling exactly half of it lands the second
     copy where the first began and the loop has no seam. */
  @keyframes mat-drift-y {
    from { transform: translateY(0); }
    to   { transform: translateY(-50%); }
  }
  @keyframes mat-drift-x {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }

  .landing-page .mat-scatter__card {
    /* The bottom margin, not the track's `gap`, is what makes translateY(-50%)
       land exactly one copy down — with `gap` the loop is off by half a gap and
       visibly jumps. */
    margin-bottom: var(--space-6);
    padding: var(--space-6);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    box-shadow: 0 6px 18px color-mix(in oklch, var(--color-ink) 10%, transparent);
    zoom: 0.46;
  }
  /* Every card sits at a slightly different angle, like sheets dropped on a
     desk. Rotating the CARD and drifting the TRACK keeps the two transforms
     from fighting each other. */
  .landing-page .mat-scatter__card:nth-child(3n + 1) { transform: rotate(-3deg); }
  .landing-page .mat-scatter__card:nth-child(3n + 2) { transform: rotate(2.2deg); }
  .landing-page .mat-scatter__card:nth-child(3n + 3) { transform: rotate(-1.4deg); }

  /* The stickers: the material types, named. Bigger type than the sheets
     because they are the one thing in the gutter meant to be READ. */
  .landing-page .mat-scatter__card--sticker {
    zoom: 1;
    padding: var(--space-5) var(--space-6);
    background: var(--color-accent-soft);
    border-color: var(--color-accent);
  }
  .landing-page .mat-scatter__label {
    display: block;
    font-weight: 700;
    color: var(--color-accent-ink);
    white-space: nowrap;
  }

  /* ── The same hero on a phone ─────────────────────────────────────────
     Most of the traffic is mobile, and there are no gutters there: a card in
     one would have to run under the headline. So the two vertical columns
     become ONE horizontal band under the copy, drifting sideways and bleeding
     off both edges — same idea, same cards, the axis the screen has room for. */
  /* 76rem is where 36rem of gutters plus the 38rem copy stop fitting side by
     side. Below it the gutters would have to run under the headline. */
  @media (max-width: 76rem) {
    /* .lp-hero is a flex container, so dropping the gutters out of absolute
       positioning turns the band into a flex ITEM beside the copy — the two
       then split the width and the headline breaks one word per line. Stack
       them, and put the band after the text it is illustrating. */
    .landing-page .mat-hero {
      flex-direction: column;
      align-items: stretch;
    }
    .landing-page .mat-hero__copy {
      order: 1;
      text-align: left;
    }
    .landing-page .mat-scatter {
      order: 2;
    }
    .landing-page .mat-hero__copy .lp-lede {
      margin-inline: 0;
    }

    /* Already the full width of the section, so no 100vw full-bleed trick: on a
       page with a scrollbar 100vw is WIDER than the viewport, and the band was
       pushing 6px of sideways scroll at 360px. */
    .landing-page .mat-scatter {
      position: static;
      margin-top: var(--space-10);
      overflow: hidden;
      mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    }
    /* One band: the second column's cards ride along in the same row, which is
       what keeps the sheets and the stickers interleaved instead of clumped. */
    .landing-page .mat-scatter__col {
      position: static;
      width: auto;
      height: auto;
      overflow: visible;
      mask-image: none;
    }
    .landing-page .mat-scatter__col--right {
      display: none;
    }
    .landing-page .mat-scatter__track {
      display: flex;
      align-items: center;
      width: max-content;
      animation-name: mat-drift-x;
      animation-duration: 42s;
    }
    .landing-page .mat-scatter__card {
      flex: 0 0 auto;
      margin-bottom: 0;
      margin-right: var(--space-5);
      zoom: 0.4;
    }
    .landing-page .mat-scatter__card--sticker {
      zoom: 1;
    }
  }

  /* ── A section per job the teacher is doing ───────────────────────── */
  .landing-page .mat-feature {
    padding-block: var(--space-16);
    overflow: hidden;
  }
  .landing-page .mat-feature__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
    gap: var(--space-12);
    align-items: center;
  }
  .landing-page .mat-feature__copy {
    max-width: 40rem;
  }

  .landing-page .mat-points {
    margin: var(--space-6) 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--space-4);
  }
  .landing-page .mat-points li {
    position: relative;
    padding-left: var(--space-6);
    font-size: 1rem;
    line-height: var(--line-loose);
    color: var(--color-ink-muted);
  }
  .landing-page .mat-points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6em;
    width: var(--space-2-5);
    height: var(--space-2-5);
    border-radius: var(--radius-round);
    background: var(--color-accent-soft);
    border: 1px solid var(--color-accent);
  }

  /* Which plans this section needs. Deliberately quiet and in sentence case:
     uppercased it was two lines of shouting fine print under every section,
     and it is a footnote, not a claim. */
  .landing-page .mat-feature__tier {
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    font-size: 0.875rem;
    color: var(--color-ink-subtle);
  }

  /* ── The strip of real sheets running beside the copy ─────────────────
     Evidence, not a catalog: small, moving and cropped on purpose. The track
     holds every sheet twice and slides exactly one copy, so the loop has no
     seam. The seam only stays invisible because each sheet carries its own
     bottom margin instead of the track using `gap` — with `gap`, half the
     track is off by half a gap and the loop visibly jumps. */
  .landing-page .mat-strip {
    position: relative;
    height: 32rem;
    overflow: hidden;
    /* Fades the sheets into the page at both ends, so the strip reads as
       texture beside the text rather than as a list that got cut off. */
    mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  }
  .landing-page .mat-strip__track {
    animation: mat-drift-y 60s linear infinite;
  }
  /* Hovering pauses it, so a curious visitor can actually read a sheet. */
  .landing-page .mat-strip:hover .mat-strip__track {
    animation-play-state: paused;
  }

  .landing-page .mat-strip__sheet {
    /* `zoom`, not `transform: scale()`: zoom shrinks the layout box too, so the
       track's height is the height of what you actually see. A scaled sheet
       would keep its full-size box and leave a crater under every one.
       0.68 with tighter padding, because at 0.6 inside a space-8 frame the
       sheets read as pale, half-empty boxes — several of them are legitimately
       mostly white (a lined answer space, a cloze), and the frame was adding
       more white around them. */
    zoom: 0.68;
    margin-bottom: var(--space-6);
    padding: var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    box-shadow: 0 1px 3px color-mix(in oklch, var(--color-ink) 8%, transparent);
  }

  /* ── Material types ───────────────────────────────────────────────── */
  .landing-page .mat-types {
    padding-block: var(--space-16);
  }
  .landing-page .mat-types__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: var(--space-5);
    margin-top: var(--space-8);
    padding: 0;
    list-style: none;
  }
  .landing-page .mat-type {
    padding: var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
  }
  .landing-page .mat-type__name {
    display: block;
    font-weight: 700;
    color: var(--color-ink);
  }
  .landing-page .mat-type__tier {
    display: inline-block;
    margin: var(--space-2) 0 var(--space-3);
    padding: var(--space-1) var(--space-2-5);
    border-radius: var(--radius-pill);
    background: color-mix(in oklch, var(--color-ink) 6%, transparent);
    color: var(--color-ink-muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: var(--letter-wide);
    text-transform: uppercase;
  }
  .landing-page .mat-type__note {
    display: block;
    font-size: 0.95rem;
    line-height: var(--line-loose);
    color: var(--color-ink-subtle);
  }
  .landing-page .mat-types__foot {
    margin-top: var(--space-8);
    color: var(--color-ink-subtle);
  }

  /* ── Free generators ──────────────────────────────────────────────── */
  .landing-page .mat-free {
    padding-block: var(--space-16);
  }
  .landing-page .mat-free__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--space-5);
    margin-top: var(--space-8);
  }
  .landing-page .mat-free__card {
    display: block;
    padding: var(--space-6);
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-large);
    text-decoration: none;
    transition-duration: var(--duration-fast);
  }
  .landing-page .mat-free__card:hover {
    border-color: var(--color-accent);
    box-shadow: var(--focus-ring-accent);
  }
  .landing-page .mat-free__name {
    display: block;
    font-weight: 700;
    color: var(--color-ink);
    margin-bottom: var(--space-2);
  }
  .landing-page .mat-free__desc {
    display: block;
    font-size: 0.95rem;
    line-height: var(--line-loose);
    color: var(--color-ink-subtle);
  }

  /* On a phone the sections' strips turn sideways too, like the hero's band.
     A 24rem-tall window showed three pale, half-empty sheets and cost 400px of
     scroll per section; running the same sheets across shows more of each one
     in half the height, and the whole page speaks one language. */
  @media (max-width: 60rem) {
    .landing-page .mat-feature__grid {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-8);
    }

    /* Eight stacked type cards ran over 2000px of phone scroll. Tighter, and
       the name and its tier share a line instead of taking two. */
    .landing-page .mat-types__list {
      gap: var(--space-3);
    }
    .landing-page .mat-type {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: baseline;
      gap: var(--space-2) var(--space-3);
      padding: var(--space-4);
    }
    .landing-page .mat-type__tier {
      margin: 0;
    }
    .landing-page .mat-type__note {
      grid-column: 1 / -1;
    }

    .landing-page .mat-strip {
      height: auto;
      mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
    }
    .landing-page .mat-strip__track {
      display: flex;
      align-items: center;
      width: max-content;
      animation-name: mat-drift-x;
      animation-duration: 46s;
    }
    .landing-page .mat-strip__sheet {
      flex: 0 0 auto;
      margin-bottom: 0;
      margin-right: var(--space-5);
      zoom: 0.42;
    }
  }

  /* ── The generator pages themselves ───────────────────────────────── */
  .landing-page .gen-form {
    display: grid;
    gap: var(--space-5);
    max-width: 34rem;
    margin: var(--space-8) 0 var(--space-4);
  }
  .landing-page .gen-field__label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-ink-muted);
    margin-bottom: var(--space-2);
  }
  .landing-page .gen-field--row {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--space-5);
  }
  .landing-page .gen-field__control {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-medium);
    background: var(--color-surface);
    color: var(--color-ink);
    font-family: inherit;
    font-size: 1rem;
  }
  .landing-page .gen-field__control--area {
    line-height: var(--line-loose);
    resize: vertical;
  }
  .landing-page .gen-field__control--narrow {
    width: 9rem;
  }
  .landing-page .gen-field__hint {
    margin-top: var(--space-2);
    font-size: 0.85rem;
    color: var(--color-ink-subtle);
  }
  .landing-page .gen-check {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.95rem;
    color: var(--color-ink-muted);
  }
  .landing-page .gen-form__btn {
    justify-self: start;
  }
  .landing-page .gen-hero__note {
    font-size: 0.95rem;
    color: var(--color-ink-subtle);
  }
  .landing-page .gen-error {
    margin-top: var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius-medium);
    background: var(--color-accent-soft);
    color: var(--color-accent-ink);
    font-size: 0.95rem;
  }

  .landing-page .gen-result {
    padding-block: var(--space-12);
  }
  .landing-page .gen-result__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
  }
  .landing-page .gen-result__hint {
    font-size: 0.9rem;
    color: var(--color-ink-subtle);
  }

  /* "Quero outro", under the sheet: no top padding, because it belongs to the
     result above it rather than starting a section of its own. */
  .landing-page .gen-again {
    padding-bottom: var(--space-12);
  }
  .landing-page .gen-again__hint {
    margin-top: var(--space-3);
    font-size: 0.9rem;
    color: var(--color-ink-subtle);
  }

  /* The sheet, framed like the sheet of paper it is about to become. */
  .landing-page .gen-sheet {
    max-width: 46rem;
    padding: var(--space-10);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    box-shadow: 0 2px 8px color-mix(in oklch, var(--color-ink) 8%, transparent);
    overflow-x: auto;
  }
  .landing-page .gen-sheet__key {
    margin-top: var(--space-10);
    padding-top: var(--space-6);
    border-top: 1px dashed var(--color-border-strong);
  }

  /* ── Classroom notes ──────────────────────────────────────────────────
     Three columns of "when, how, printing" under each generator. Hidden in
     print with the rest of the marketing: she asked for the sheet. */
  .landing-page .gen-notes {
    padding-block: var(--space-16);
    border-top: 1px solid var(--color-border);
  }

  .landing-page .gen-notes h2 {
    margin: 0 0 var(--space-3);
  }

  .landing-page .gen-notes__lede {
    max-width: 62ch;
    color: var(--color-ink-subtle);
    line-height: var(--line-loose);
    margin: 0 0 var(--space-8);
  }

  .landing-page .gen-notes__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-8);
  }

  .landing-page .gen-notes__col h3 {
    font-size: 1rem;
    margin: 0 0 var(--space-3);
  }

  .landing-page .gen-notes__col ul {
    margin: 0;
    padding-left: var(--space-5);
    display: grid;
    gap: var(--space-3);
  }

  .landing-page .gen-notes__col li {
    color: var(--color-ink-subtle);
    line-height: var(--line-loose);
  }

  .landing-page .gen-cross {
    padding-block: var(--space-16);
  }
  .landing-page .mat-free__card--catalog {
    background: var(--color-accent-soft);
    border-color: var(--color-accent);
  }

  /* ── Print ────────────────────────────────────────────────────────────
     The teacher asked for a worksheet, not for our marketing. Everything but
     the generated sheet is dropped, and the sheet loses its screen frame so it
     starts at the top of the page. */
  @media print {
    .landing-page .lp-topnav,
    .landing-page .lp-site-footer,
    .landing-page .lp-final-cta,
    .landing-page .lp-skip-link,
    .landing-page [data-print-hide] {
      display: none;
    }

    .landing-page .gen-result {
      padding-block: 0;
    }
    .landing-page .gen-sheet {
      max-width: none;
      padding: 0;
      border: none;
      border-radius: 0;
      box-shadow: none;
      overflow-x: visible;
    }
    .landing-page .gen-sheet__key {
      break-before: page;
    }
  }

  /* ── The motion opt-out, last and specific enough to win ──────────────
     One block at the end of the file rather than one beside each animation:
     the media queries below 76rem re-set `animation-name` on these same
     selectors, and the right column's rule outranks a single class. Placed
     beside its animation, the opt-out loses both ways. */
  @media (prefers-reduced-motion: reduce) {
    .landing-page .mat-scatter .mat-scatter__track,
    .landing-page .mat-scatter__col--right .mat-scatter__track,
    .landing-page .mat-strip .mat-strip__track {
      animation: none;
    }
  }

}