/* Totemphonia v2 · Sound Design (Kilian, 2026-10-25): the demo first, fullscreen, a still frame and one big play; a
   step down (steps.js, as on the home) lands on the text: four briefs, one method, the form.
   First person, no client names. */

.sd { --cols: repeat(12, minmax(0, 1fr)); --hdr: 4.25rem; --d-h: clamp(1.9rem, 1.2rem + 2.3vw, 3.25rem); }
.sd > section:not(.d-reel) { padding: 0 var(--gutter); }
.d-inline { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; transition: text-decoration-color 0.3s; }
.d-inline:focus-visible { text-decoration-color: transparent; }
@media (hover: hover) { .d-inline:hover { text-decoration-color: transparent; } }

/* ---------- the reel ---------- */
.d-reel { position: relative; height: 100svh; min-height: 30rem; overflow: hidden; isolation: isolate; background: #F4F5F7; }
.d-reel__poster, .d-reel__poster img, .d-reel__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }
.d-reel__video { opacity: 0; background: #000; transition: opacity 0.7s var(--settle); }
.d-reel.is-started .d-reel__video { opacity: 1; }
@media (max-aspect-ratio: 1/1) { .d-reel.is-started .d-reel__video { object-fit: contain; } } /* phones upright: the whole frame */
.d-reel__ui { position: absolute; inset: 0; display: grid; align-content: end; padding: calc(var(--hdr) + 1rem) var(--gutter) calc(var(--gutter) + 0.5rem); pointer-events: none; }
.d-reel__title { transition: opacity 0.6s var(--settle), translate 0.8s var(--settle); }
.d-title { font-family: var(--f-voice); font-weight: 300; font-size: clamp(3.4rem, 1.6rem + 6vw, 7.4rem); line-height: 0.95; letter-spacing: -0.03em; margin-left: -0.05em; }

/* one big play: a ring that fills on hover, the triangle in it */
.d-play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; justify-items: center; gap: 0.75rem; pointer-events: auto; transition: opacity 0.5s var(--settle); -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.d-play__icon { display: grid; place-items: center; width: clamp(5.5rem, 4.2rem + 3.6vw, 8rem); aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--ink); background: color-mix(in srgb, var(--ground) 50%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color 0.35s, scale 0.6s var(--settle); }
.d-play__icon::before { content: ''; width: 0; height: 0; border-style: solid; border-width: 0.95rem 0 0.95rem 1.6rem; border-color: transparent transparent transparent var(--ink); margin-left: 0.35rem; transition: border-color 0.35s; }
.d-play__label { font-weight: 500; font-size: 1.05rem; }
.d-play__time { margin-top: -0.45rem; font-family: var(--f-data); font-size: var(--t-data); color: var(--muted); }
.d-play:focus-visible { outline: none; }
.d-play:focus-visible .d-play__icon { background: var(--ink); scale: 1.06; }
.d-play:focus-visible .d-play__icon::before { border-left-color: var(--ground); }
@media (hover: hover) {
  .d-play:hover .d-play__icon { background: var(--ink); scale: 1.06; }
  .d-play:hover .d-play__icon::before { border-left-color: var(--ground); }
}
.d-play:active .d-play__icon { scale: 0.97; }
.d-reel.is-started .d-play, .d-reel.is-started .d-reel__title { opacity: 0; pointer-events: none; }
.d-reel.is-started .d-reel__title { translate: 0 0.6rem; }

/* while it plays: a slim bar (pause, the time line, the time), drawn as a difference so it reads on any frame */
.d-bar { position: absolute; left: var(--gutter); right: var(--gutter); bottom: var(--gutter); display: flex; align-items: center; gap: 1rem; color: #fff; mix-blend-mode: difference; opacity: 0; pointer-events: none; transition: opacity 0.5s var(--settle); }
.d-reel.is-started .d-bar { opacity: 1; pointer-events: auto; }
.d-reel.is-started.is-idle .d-bar { opacity: 0; }
.d-bar__toggle { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin: -0.5rem; }
.d-bar__toggle span { width: 0.75rem; height: 0.9rem; border-left: 3px solid currentColor; border-right: 3px solid currentColor; } /* pause: two bars */
.d-reel.is-paused .d-bar__toggle span { width: 0; height: 0; border-style: solid; border-width: 0.5rem 0 0.5rem 0.85rem; border-color: transparent transparent transparent currentColor; margin-left: 0.2rem; } /* play */
.d-bar__line { position: relative; flex: 1; height: 1.75rem; cursor: pointer; touch-action: none; } /* a finger scrubs it (the page does not take the touch: data-lenis-prevent) */
@media (pointer: coarse) { .d-bar__line { height: 2.75rem; } .d-bar__toggle { width: 3rem; height: 3rem; } }
.d-bar__line::before, .d-bar__line i { content: ''; position: absolute; left: 0; top: 50%; height: 1px; translate: 0 -50%; background: currentColor; }
.d-bar__line::before { right: 0; opacity: 0.4; }
.d-bar__line i { width: var(--p, 0%); height: 2px; }
.d-bar__time { font-family: var(--f-data); font-size: var(--t-data); font-variant-numeric: tabular-nums; min-width: 2.6rem; text-align: right; }
html.is-reel-quiet .chrome { opacity: 0; pointer-events: none; }
.chrome { transition: opacity 0.5s var(--settle); }

/* ---------- sections: heading left, text right ---------- */
.d-sec { display: grid; grid-template-columns: var(--cols); gap: 1.4rem var(--gutter); margin-top: clamp(6rem, 18svh, 11rem); scroll-margin-top: calc(var(--hdr) + 1.5rem); }
.d-intro { margin-top: 0; padding-top: calc(var(--hdr) + clamp(3rem, 12svh, 7rem)) !important; }
.d-sec__head { grid-column: 1 / span 5; }
.d-sec__body { grid-column: 7 / -1; max-width: 46rem; display: grid; gap: 1.1rem; align-content: start; }
.d-sec__body p { line-height: 1.6; }
.d-h { font-family: var(--f-voice); font-weight: 300; font-size: var(--d-h); line-height: 1.05; letter-spacing: -0.02em; margin-left: -0.04em; text-wrap: balance; }
.d-h--big { font-size: clamp(2.3rem, 1.3rem + 3.2vw, 4.4rem); line-height: 1; letter-spacing: -0.025em; }
.d-prose { gap: 1.15rem; }

/* four briefs: a quote each, what it means below */
.d-briefs__list { grid-column: 7 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 2.6rem var(--gutter); }
.d-brief { border-top: 1px solid var(--line); padding-top: 1rem; display: grid; gap: 0.7rem; align-content: start; }
.d-brief__n { font-family: var(--f-data); font-size: var(--t-data); color: var(--muted); }
.d-brief__q { font-family: var(--f-voice); font-weight: 300; font-size: clamp(1.45rem, 1.1rem + 0.9vw, 1.95rem); line-height: 1.12; letter-spacing: -0.012em; text-wrap: balance; }
.d-brief p:last-child { font-size: 0.97rem; line-height: 1.55; color: color-mix(in srgb, var(--ink) 84%, var(--ground)); }

/* one method: four stations on one line, reached as the page passes them */
.d-method__steps { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--gutter); position: relative; margin-top: 1.2rem; }
.d-method__steps::before { content: ''; position: absolute; left: 0; right: 0; top: 0.55rem; height: 1px; background: var(--line); }
.d-step { position: relative; padding-top: 2.2rem; display: grid; gap: 0.6rem; align-content: start; }
.d-step::before { content: ''; position: absolute; left: 0; top: 0; width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 1px solid var(--ink); background: var(--ground); transition: background-color 0.6s var(--settle); }
.d-step__h { font-family: var(--f-voice); font-weight: 300; font-size: clamp(2rem, 1.3rem + 2vw, 3.2rem); line-height: 1; letter-spacing: -0.02em; transition: color 0.6s var(--settle); }
.d-step p { max-width: 26ch; line-height: 1.5; font-size: 0.97rem; transition: color 0.6s var(--settle); }
.js.motion .d-step:not(.is-reached) .d-step__h, .js.motion .d-step:not(.is-reached) p { color: color-mix(in srgb, var(--ink) 35%, var(--ground)); }
.d-step.is-reached::before { background: var(--ink); }
.d-method__line { grid-column: 1 / span 8; margin-top: clamp(2.5rem, 7svh, 4.5rem); font-family: var(--f-voice); font-weight: 300; font-size: clamp(1.45rem, 1rem + 1.3vw, 2.2rem); line-height: 1.2; letter-spacing: -0.012em; text-wrap: pretty; }


.d-sec--book { padding-bottom: clamp(5rem, 14svh, 9rem) !important; }

/* ---------- tablet / phone ---------- */
@media (max-width: 1000px) {
  .d-sec__head, .d-sec__body, .d-briefs__list, .d-method__line { grid-column: 1 / -1; }
  .d-method__steps { grid-template-columns: 1fr 1fr; gap: 2.4rem var(--gutter); }
  .d-method__steps::before { display: none; }
}
@media (max-width: 640px) {
  .d-briefs__list, .d-method__steps { grid-template-columns: 1fr; }
  .d-play__label { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .d-reel__video, .d-play, .d-reel__title, .d-bar, .chrome { transition: none; } }