/* ============================================================
   DOUBLOON STUDIO · SECTIONS
   The words over each film scene, the quill headlines, the depth
   layer, and the three sections after the film (shaping, about,
   contact). Uses tokens only (css/tokens.css): no color value and no
   font name in this file.

   Placement: each .scene__words carries data-place, which decides
   where its words sit over the film. Change the attribute in
   index.html to move a scene's words to a calmer part of its picture:
   low-start, low-end, high-start, high-end, mid-start, low-wide,
   center.
   ============================================================ */

/* ---------- quill headlines ---------- */

@property --ink {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 115%;
}

.quill {
  --quill-density: linear-gradient(97deg,
      var(--mask-ink) 0%, var(--mask-thin) 21%, var(--mask-ink) 36%,
      var(--mask-thin) 57%, var(--mask-ink) 73%, var(--mask-thin) 100%);
  font-family: var(--font-quill);
  font-weight: var(--weight-quill);
  line-height: var(--leading-quill);
  letter-spacing: var(--tracking-quill);
  color: var(--quill-ink);
  /* a slight bleed at the edge of the ink, and a dark halo so the line
     holds over a bright frame. Both are still, never animated. */
  text-shadow: 0 0 0.5px var(--quill-bleed), 0 0.02em 0.14em var(--quill-halo);
  text-wrap: balance;
  /* room for swashes, so the mask never trims a stroke */
  padding: 0.12em 0.25em 0.18em 0;
  margin-block: -0.12em -0.18em;
  /* uneven ink: a still mask that lets the line run a little lighter
     in places, as a pen does when it runs low */
  -webkit-mask-image: var(--quill-density);
  mask-image: var(--quill-density);
}

.section h2.quill {
  color: var(--quill-ink);
}

/* The write-on. sections.js adds quill-armed to <html> only when motion
   is allowed, then is-written to each line as its words come in. With
   scripts off, or under reduced motion, the lines are simply there. */
html.quill-armed .quill {
  --ink: -12%;
  -webkit-mask-image:
    linear-gradient(100deg, var(--mask-ink) calc(var(--ink) - 7%), var(--mask-clear) calc(var(--ink) + 3%)),
    var(--quill-density);
  mask-image:
    linear-gradient(100deg, var(--mask-ink) calc(var(--ink) - 7%), var(--mask-clear) calc(var(--ink) + 3%)),
    var(--quill-density);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

html.quill-armed .quill.is-written {
  animation: quill-write 1.05s linear forwards;
}

/* uneven pen speed: quick strokes with small pauses between them */
@keyframes quill-write {
  0%   { --ink: -12%; }
  13%  { --ink: 19%; }
  21%  { --ink: 23%; }
  43%  { --ink: 52%; }
  51%  { --ink: 55%; }
  77%  { --ink: 87%; }
  85%  { --ink: 90%; }
  100% { --ink: 115%; }
}

/* On the film's stage, a scene's words come in when its beat arrives:
   the headline writes on first, then the rest follows. They leave at
   the cut, with no fade. */
html.film-on .scene .words > :not(.quill):not(.scene__mark):not(.yours__head) {
  opacity: 0;
}

html.film-on .scene[data-current] .words > :not(.quill):not(.scene__mark):not(.yours__head) {
  opacity: 1;
  transition: opacity 0.45s ease 0.8s;
}

/* On the stage a scene is exactly one screen tall, so its words must
   fit one screen (the stacked layout let a scene grow). Headlines are
   capped by screen height as well as width, and the long scenes
   (the argument, the four steps, the name field) set tighter. */
html.film-on .film-stage .scene .scene__words[data-place] {
  padding-bottom: max(1.5rem, 6svh);
}

html.film-on .film-stage .scene__words .quill {
  font-size: min(calc(var(--size-quill-scene) * var(--quill-scale)), 10svh);
}

html.film-on .film-stage .steps {
  gap: 0.5rem;
  margin-top: 0.6rem;
}

html.film-on .film-stage .steps__item {
  margin-left: calc(var(--depth) * 0.6rem);
  margin-top: 0;
}

html.film-on .film-stage .steps__item p:not(.steps__name),
html.film-on .film-stage .words--argument p:not(.scene__mark):not(.quill) {
  font-size: min(var(--size-body), max(var(--size-small), 2.3svh));
  line-height: 1.45;
}

html.film-on .film-stage .steps__n {
  font-size: 1.45rem;
}

html.film-on .film-stage .words--yours {
  gap: 0.75rem;
}

html.film-on .film-stage .rim {
  width: min(86vw, 25rem, 34svh);
}

/* short screens (a small phone with its toolbars showing) */
@media (max-height: 40rem) {
  html.film-on .film-stage .scene__words .quill {
    font-size: min(calc(var(--size-quill-scene) * var(--quill-scale)), 8svh);
  }

  html.film-on .film-stage .steps__item p:not(.steps__name),
  html.film-on .film-stage .words--argument p:not(.scene__mark):not(.quill) {
    font-size: var(--size-label);
  }

  html.film-on .film-stage .scene .scene__words[data-place] {
    padding-top: 3.75rem;
  }

  html.film-on .film-stage .rim {
    width: min(86vw, 25rem, 30svh);
  }

  html.film-on .film-stage .yours__note {
    font-size: var(--size-label);
  }
}

/* ---------- scene words: placement over the film ---------- */

/* The scene's own view timeline, so the depth layer inside can drift
   with the page. Not visual; the scene shell is otherwise untouched. */
.scene {
  view-timeline: --scene block;
}

/* ".scene" in front outranks the base rule that pushes even scenes to
   the right; placement here comes from data-place instead. */
.scene .scene__words[data-place] {
  align-self: stretch;
  justify-self: stretch;
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: 4.5rem 1rem 12vh;
  text-align: left;
  /* the words box covers the scene; only the words themselves take
     taps, so the film's own controls stay reachable */
  pointer-events: none;
}

.words,
.brand {
  pointer-events: auto;
}

.words {
  position: relative;
  max-width: 34rem;
}

[data-place="low-start"] > .words  { align-self: end;    justify-self: start; }
[data-place="low-end"] > .words    { align-self: end;    justify-self: start; }
[data-place="high-start"] > .words { align-self: start;  justify-self: start; }
[data-place="high-end"] > .words   { align-self: start;  justify-self: start; }
[data-place="mid-start"] > .words  { align-self: center; justify-self: start; }
[data-place="low-wide"] > .words   { align-self: end;    justify-self: stretch; max-width: 64rem; }
[data-place="center"] > .words     { align-self: center; justify-self: stretch; max-width: 64rem; }

.brand {
  position: absolute;
  top: 0.9rem;
  left: 1rem;
  font-size: var(--size-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text);
  text-shadow: 0 1px 10px var(--words-halo);
}

.scene__mark {
  font-size: var(--size-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  text-shadow: 0 1px 10px var(--words-halo);
}

.scene__mark span {
  color: var(--accent);
  margin-right: 0.5em;
}

.scene__words .quill {
  font-size: calc(var(--size-quill-scene) * var(--quill-scale));
  margin-top: 0.15em;
  margin-bottom: 0.25em;
}

.words p:not(.scene__mark):not(.quill) {
  text-shadow: 0 0 2px var(--words-halo), 0 1px 16px var(--words-halo);
}

.words p + p {
  margin-top: 0.8em;
}

.words__lede {
  margin-bottom: 1.4rem;
}

/* one plain outlined link; flat fill on hover */
.words__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 1.25rem;
  padding: 0 1.15rem;
  border: 1px solid var(--accent);
  border-radius: 2px;
  color: var(--text);
  font-size: var(--size-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  background: var(--scrim);
}

.words__link:hover,
.words__link:focus-visible {
  background: var(--action);
  border-color: var(--action);
  color: var(--on-action);
}

.signoff {
  font-size: calc(var(--size-quill-section) * 0.85 * var(--quill-scale));
  margin-top: 0.3em;
}

/* ---------- scene 5: four steps at four depths ---------- */

.steps {
  list-style: none;
  padding: 0;
  margin-top: 1.1rem;
  display: grid;
  gap: 0.9rem;
}

.steps__item {
  --depth: 0;
  margin-left: calc(var(--depth) * 1rem);
  margin-top: calc(var(--depth) * 0.35rem);
  padding-left: 0.95rem;
  border-left: 1px solid var(--rule);
}

.steps__item:nth-child(2) { --depth: 1; }
.steps__item:nth-child(3) { --depth: 2; }
.steps__item:nth-child(4) { --depth: 3; }

.steps__item p {
  margin-top: 0.15rem;
}

.steps__name {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: var(--size-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.steps__n {
  font-family: var(--font-quill);
  font-size: 1.9rem;
  line-height: 1;
  letter-spacing: 0;
  color: var(--quill-ink);
}

/* ---------- scene 6: the work ---------- */

.work__label {
  margin-top: 1.6rem;
  font-size: var(--size-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
}

.work {
  list-style: none;
  padding: 0;
  margin-top: 0.6rem;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.4rem 0;
}

.work__coin {
  width: clamp(4.25rem, 19vw, 8.5rem);
  margin-right: -0.5rem;
}

/* lying where they fell: no two at the same turn or depth */
.work__coin:nth-child(1) { transform: rotate(-17deg) translateY(0.3rem); }
.work__coin:nth-child(2) { transform: rotate(24deg) scale(0.86); }
.work__coin:nth-child(3) { transform: rotate(-5deg) translateY(0.55rem) scale(1.06); }
.work__coin:nth-child(4) { transform: rotate(38deg) scale(0.8) translateY(-0.2rem); }
.work__coin:nth-child(5) { transform: rotate(-31deg) scale(0.93) translateY(0.4rem); }

.work__coin img {
  width: 100%;
  height: auto;
}

.work__link {
  display: block;
  color: var(--text);
  text-decoration: none;
}

.work__name {
  display: block;
  margin-top: 0.3rem;
  font-size: var(--size-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-align: center;
}

.work__note {
  margin-top: 1rem;
  font-size: var(--size-small);
  color: var(--text-muted);
}

/* ---------- scene 7: the name on the rim ---------- */

.words--yours {
  display: grid;
  gap: 1.25rem;
  justify-items: start;
}

/* the coin and its ring always fit one screen with the field below */
.rim {
  position: relative;
  width: min(86vw, 25rem, 46vh);
  aspect-ratio: 1;
  justify-self: center;
}

.rim__coin {
  position: absolute;
  top: 14%;
  left: 14%;
  width: 72%;
  height: 72%;
}

.rim__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.rim__text {
  fill: var(--quill-ink);
  font-family: var(--font-body);
  letter-spacing: 0.12em;
}

.yours {
  display: grid;
  gap: 0.45rem;
  width: min(100%, 24rem);
  justify-self: center;
}

.yours__label,
.card__field label {
  font-size: var(--size-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.yours__note {
  font-size: var(--size-small);
  color: var(--text-muted);
}

.yours .words__link {
  justify-self: start;
  margin-top: 0.5rem;
}

/* ---------- fields (scene 7 and the contact card) ---------- */

.yours__input,
.card input,
.card select,
.card textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.6rem 0.75rem;
  font: inherit;
  color: var(--text);
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: 3px;
}

.card textarea {
  min-height: 8.5rem;
  resize: vertical;
}

.yours__input:hover,
.card input:hover,
.card select:hover,
.card textarea:hover {
  border-color: var(--accent);
}

/* ---------- depth layer: specks drifting at three speeds ---------- */

.specks {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: clip;
  pointer-events: none;
}

.specks i {
  position: absolute;
  inset: -30% 0;
  background-repeat: repeat;
}

/* forge: embers */
.specks--ember i:nth-child(1) {
  background-image:
    radial-gradient(circle at 21% 33%, var(--speck-ember) 0 0.8px, var(--speck-clear) 1.4px),
    radial-gradient(circle at 74% 79%, var(--speck-ember) 0 0.7px, var(--speck-clear) 1.3px);
  background-size: 137px 163px;
  opacity: 0.6;
}

.specks--ember i:nth-child(2) {
  background-image:
    radial-gradient(circle at 63% 18%, var(--speck-ember) 0 1.2px, var(--speck-clear) 2.2px),
    radial-gradient(circle at 12% 71%, var(--speck-ember) 0 1px, var(--speck-clear) 2px);
  background-size: 229px 271px;
  opacity: 0.75;
}

.specks--ember i:nth-child(3) {
  background-image: radial-gradient(circle at 38% 52%, var(--speck-ember) 0 1.4px, var(--speck-clear) 4px);
  background-size: 383px 419px;
  opacity: 0.85;
}

/* water: bubbles, drawn as thin rings */
.specks--bubble i:nth-child(1) {
  background-image: radial-gradient(circle at 30% 40%, var(--speck-clear) 0 1.2px, var(--speck-bubble) 1.5px 2px, var(--speck-clear) 2.4px);
  background-size: 149px 181px;
  opacity: 0.7;
}

.specks--bubble i:nth-child(2) {
  background-image:
    radial-gradient(circle at 70% 25%, var(--speck-clear) 0 2.5px, var(--speck-bubble) 3px 3.8px, var(--speck-clear) 4.3px),
    radial-gradient(circle at 18% 82%, var(--speck-clear) 0 1.6px, var(--speck-bubble) 2px 2.6px, var(--speck-clear) 3px);
  background-size: 241px 293px;
}

.specks--bubble i:nth-child(3) {
  background-image: radial-gradient(circle at 46% 60%, var(--speck-clear) 0 4.5px, var(--speck-bubble) 5.2px 6.3px, var(--speck-clear) 7px);
  background-size: 397px 457px;
}

/* the last coin: fine gold dust */
.specks--dust i:nth-child(1) {
  background-image: radial-gradient(circle at 27% 37%, var(--speck-dust) 0 0.7px, var(--speck-clear) 1.3px);
  background-size: 113px 139px;
  opacity: 0.6;
}

.specks--dust i:nth-child(2) {
  background-image: radial-gradient(circle at 66% 22%, var(--speck-dust) 0 1px, var(--speck-clear) 1.8px);
  background-size: 211px 239px;
  opacity: 0.7;
}

.specks--dust i:nth-child(3) {
  background-image: radial-gradient(circle at 41% 58%, var(--speck-dust) 0 1.3px, var(--speck-clear) 3px);
  background-size: 359px 401px;
  opacity: 0.8;
}

/* ---------- after the film: how a project is shaped ---------- */

.shaping {
  display: grid;
  gap: 1.5rem;
}

.shaping__list {
  border-top: 1px solid var(--rule);
}

.shaping__row {
  display: grid;
  gap: 0.25rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--rule);
}

.shaping__row dt {
  font-size: var(--size-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
}

.shaping__row dd {
  margin: 0;
  max-width: var(--measure);
}

.shaping .words__link {
  justify-self: start;
  margin-top: 0;
}

/* ---------- about ---------- */

.about {
  display: grid;
  gap: 2rem;
  max-width: 60rem;
}

.about__photo {
  position: relative;
  width: min(100%, 17rem);
}

.about__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 10rem 10rem 4px 4px;
}

/* ---------- contact card ---------- */

.contact {
  display: grid;
  gap: 2rem;
  max-width: 66rem;
}

.contact__head p {
  max-width: 26em;
}

.card {
  display: grid;
  gap: 1.1rem;
  padding: 1.5rem 1rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 6px;
}

.card__field {
  display: grid;
  gap: 0.4rem;
}

/* honeypot: off screen for people, skipped by keyboards and readers */
.card__trap {
  position: absolute;
  left: -6000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.card__send {
  justify-self: start;
  min-height: 48px;
  padding: 0 1.5rem;
  font: inherit;
  font-size: var(--size-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--on-action);
  background: var(--action);
  border: 1px solid var(--action);
  border-radius: 999px;
  cursor: pointer;
}

.card__send:hover {
  background: var(--accent);
  border-color: var(--accent);
}

.card__fine {
  font-size: var(--size-small);
  color: var(--text-muted);
}

/* ---------- wider screens ---------- */

@media (min-width: 48em) {
  .scene .scene__words[data-place] {
    padding: 5rem 6vw 12vh;
  }

  .brand {
    left: 6vw;
  }

  [data-place="low-end"] > .words,
  [data-place="high-end"] > .words {
    justify-self: end;
  }

  [data-place="high-end"] > .words {
    margin-top: 6vh;
  }

  .words--argument {
    max-width: 38rem;
  }

  .steps__item {
    margin-left: calc(var(--depth) * 3.25rem);
    margin-top: calc(var(--depth) * 0.8rem);
  }

  .words--yours {
    grid-template-columns: minmax(0, 1fr) minmax(0, min(25rem, 66vh, 40vw));
    column-gap: 4vw;
    align-items: center;
  }

  .yours__head { grid-column: 1; grid-row: 1; align-self: end; }
  .yours       { grid-column: 1; grid-row: 2; align-self: start; justify-self: start; }
  .rim         { grid-column: 2; grid-row: 1 / span 2; width: min(100%, 66vh); }

  .work__coin {
    margin-right: -0.9rem;
  }

  /* on the stage, the four steps sit two by two, still stepping down */
  html.film-on .film-stage .words--steps {
    max-width: 52rem;
  }

  html.film-on .film-stage .steps {
    grid-template-columns: 1fr 1fr;
    column-gap: 2.5rem;
    row-gap: 0.9rem;
  }

  html.film-on .film-stage .steps__item {
    margin-left: 0;
    margin-top: calc(var(--depth) * 0.6rem);
  }

  html.film-on .film-stage .rim {
    width: min(100%, 66svh);
  }

  /* shaping: heading held on the left, the list runs out to the edge */
  .section--shaping {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: 5vw;
    align-items: start;
  }

  .section--shaping > h2 {
    position: sticky;
    top: 16vh;
  }

  .shaping__list {
    margin-right: -6vw;
  }

  .shaping__row {
    grid-template-columns: 12rem minmax(0, 1fr);
    gap: 2rem;
    padding-right: 6vw;
  }

  /* about: the photo slot rides up over the section above */
  .about {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    column-gap: 5vw;
    align-items: start;
  }

  .about__photo {
    margin-top: -22vh;
    justify-self: end;
  }

  .contact {
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    column-gap: 5vw;
    align-items: start;
  }

  .card {
    grid-template-columns: 1fr 1fr;
    padding: 2rem;
    column-gap: 1.25rem;
  }

  .card__field--wide,
  .card__send,
  .card__fine {
    grid-column: 1 / -1;
  }
}

/* ---------- motion that rides the scroll (an extra layer) ---------- */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .specks i {
      --drift: 5vh;
      animation: speck-drift linear both;
      animation-timeline: --scene;
    }

    .specks i:nth-child(2) { --drift: 11vh; }
    .specks i:nth-child(3) { --drift: 19vh; }
    .specks--bubble i:nth-child(3) { --drift: 28vh; }

    /* C2 entry reveals: the words after the film rise as they arrive */
    .reveal {
      animation: words-rise linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 65%;
    }
  }
}

@keyframes speck-drift {
  from { transform: translate3d(0, var(--drift), 0); }
  to   { transform: translate3d(0, calc(var(--drift) * -1), 0); }
}

@keyframes words-rise {
  from { opacity: 0; transform: translate3d(0, 1.25rem, 0); }
  to   { opacity: 1; transform: none; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html.quill-armed .quill {
    --ink: 115%;
    -webkit-mask-image: var(--quill-density);
    mask-image: var(--quill-density);
  }

  html.quill-armed .quill.is-written {
    animation: none;
  }
}

/* ---------- footer fact card: thumb-sized links ---------- */

.fact-card dd a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}