From f837cb328091a64f2d37a84956895dde83fbda92 Mon Sep 17 00:00:00 2001
From: LucaP <luca.pislaru@protonmail.com>
Date: Sat, 10 Oct 2026 19:50:38 +0300
Subject: [PATCH] feat(ui): chrome title card and night-plate chapter panels

---
 src/styles/route.css | 123 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 123 insertions(+)

diff --git a/src/styles/route.css b/src/styles/route.css
index 4ede8d6..fdaf519 100644
--- a/src/styles/route.css
+++ b/src/styles/route.css
@@ -417,3 +417,126 @@
     display: none !important;
   }
 }
+
+/* ==========================================================================
+   Round 4: Cinema. The title is a title card, the reading panels become
+   sharp night plates instead of rounded glass, and the hero arrives with the
+   opening crane shot. Clip-path reveals only: no opacity, so contrast checks
+   see the final colours from the first frame.
+   ========================================================================== */
+
+/* ---------- Title card ---------- */
+@media screen {
+  .hero-journey .hero-name {
+    font-size: clamp(72px, 9.6vw, 164px);
+    font-weight: 720;
+    line-height: 0.86;
+    letter-spacing: -0.07em;
+    background: none;
+    padding-block-end: 0.06em;
+  }
+  /* Outrun chrome, one band per line: a bright sky over a dark horizon cut
+     and a hot reflection below it. */
+  .hero-journey .hero-name__text {
+    color: #ffc2dc;
+    background: linear-gradient(
+      180deg,
+      #fffaf2 8%,
+      #ffe2ef 34%,
+      #ff9fcd 48.5%,
+      #5b2591 49.5%,
+      #9b3fb8 54%,
+      #ff63ab 72%,
+      #ffb46e 96%
+    );
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    -webkit-box-decoration-break: clone;
+    box-decoration-break: clone;
+    filter: drop-shadow(0 0.025em 0 rgb(24 6 44)) drop-shadow(0 0 0.32em rgb(255 70 160 / 32%));
+  }
+  .hero-journey__role {
+    font-size: clamp(20px, 1.7vw, 28px);
+    font-weight: 560;
+    letter-spacing: -0.025em;
+  }
+  .hero-journey__content {
+    inline-size: min(38rem, 44vw);
+  }
+
+  /* ---------- Night plates ---------- */
+  .reading-stage .chapter-body {
+    border: 0;
+    border-radius: 2px;
+    background:
+      linear-gradient(180deg, color-mix(in srgb, var(--chapter-accent, var(--accent)) 9%, transparent), transparent 140px),
+      linear-gradient(104deg, rgb(7 3 18 / 96%), rgb(11 5 27 / 94%) 62%, rgb(14 7 32 / 93%));
+    box-shadow:
+      inset 3px 0 0 var(--chapter-accent, var(--accent)),
+      inset 0 1px 0 color-mix(in srgb, var(--chapter-accent, var(--accent)) 38%, transparent),
+      0 50px 90px -40px rgb(0 0 0 / 80%);
+  }
+  /* Crop marks: the plate is framed like a film slate, not a card. */
+  .reading-stage .chapter-body::after {
+    content: '' / '';
+    position: absolute;
+    inset: -7px;
+    pointer-events: none;
+    --mark: color-mix(in srgb, var(--chapter-accent, var(--accent)) 80%, white);
+    background:
+      linear-gradient(var(--mark), var(--mark)) top right / 18px 1px,
+      linear-gradient(var(--mark), var(--mark)) top right / 1px 18px,
+      linear-gradient(var(--mark), var(--mark)) bottom right / 18px 1px,
+      linear-gradient(var(--mark), var(--mark)) bottom right / 1px 18px,
+      linear-gradient(var(--mark), var(--mark)) bottom left / 18px 1px;
+    background-repeat: no-repeat;
+    opacity: 0.85;
+  }
+  .reading-stage .portfolio-section .section-eyebrow {
+    letter-spacing: 0.22em;
+  }
+}
+
+@media screen and (min-width: 1100px) {
+  /* The phone strip beside the evidence: three readable columns, not slivers. */
+  .reading-stage .project-case-study[data-media-layout='portrait-strip'] > .project-media-gallery {
+    gap: 18px;
+    padding: 28px 22px;
+  }
+  .reading-stage .project-case-study[data-media-layout='portrait-strip'] > .project-media-gallery figcaption {
+    font-size: 0.8rem;
+    line-height: 1.45;
+  }
+}
+
+/* ---------- The hero arrives with the crane shot ---------- */
+@media screen and (prefers-reduced-motion: no-preference) {
+  .hero-journey .hero-name {
+    animation: title-card-rise 1.5s cubic-bezier(0.16, 0.84, 0.24, 1) 0.9s both;
+  }
+  .hero-journey__content > :not(.hero-name) {
+    animation: title-card-wipe 1.1s cubic-bezier(0.6, 0, 0.2, 1) both;
+  }
+  .hero-journey__content > :nth-child(2) { animation-delay: 1.7s; }
+  .hero-journey__content > :nth-child(3) { animation-delay: 1.85s; }
+  .hero-journey__content > :nth-child(4) { animation-delay: 2s; }
+  .hero-journey__content > :nth-child(n + 5) { animation-delay: 2.15s; }
+}
+@keyframes title-card-rise {
+  from { clip-path: inset(0 -10% 100% -10%); translate: 0 0.3em; }
+  to { clip-path: inset(-20% -10% -20% -10%); translate: 0 0; }
+}
+@keyframes title-card-wipe {
+  from { clip-path: inset(-10% 100% -10% 0); }
+  to { clip-path: inset(-10% -4% -10% 0); }
+}
+@media (forced-colors: active) {
+  .hero-journey .hero-name__text {
+    background: none;
+    filter: none;
+    -webkit-text-fill-color: CanvasText;
+    color: CanvasText;
+  }
+  .reading-stage .chapter-body::after { display: none; }
+}