/* ==========================================================================
   TWO WORLDS, ONE SEAM — the section after the hero, ported from the approved
   audition (design-proposals/door-v4.html).

   One screen split by a slanted blade of orange light. The business world on
   one side in Cairo daylight, the private world on the other under a lamp -
   two photographs generated FOR this seam, each keeping its people on the
   outer side so the blade always falls through shadow, never through a face.

   Four motion layers: walk-in, ignition, speech, breath. Review-panel
   hardening carried over: every entrance state is gated behind html.tw-js so
   a no-JS visitor gets the finished section lit and whole; the scroll drift
   is CSS scroll-driven with no scroll listener; every tappable line clears
   44px; focus is visible everywhere.
   ========================================================================== */

.tw { position: relative; z-index: 2; overflow: hidden; min-height: 100svh; background: #061019; color: #f4efe4; --seam: 50%; }
.tw-world { position: absolute; inset: 0; }
.tw-world--b { clip-path: polygon(0 0, calc(var(--seam) + 6%) 0, calc(var(--seam) - 6%) 100%, 0 100%); }
.tw-world--p { clip-path: polygon(calc(var(--seam) + 6%) 0, 100% 0, 100% 100%, calc(var(--seam) - 6%) 100%); }
/* The image bleeds past its box top and bottom, buying headroom for the drift. */
.tw-world img { position: absolute; inset: -30px 0; width: 100%; height: calc(100% + 60px); object-fit: cover; }
.tw-world--b img { object-position: 12% 45%; }
.tw-world--p img { object-position: 88% 50%; }
.tw-world::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(4,9,14,.92) 0%, rgba(4,9,14,.42) 34%, rgba(4,9,14,.06) 60%); }

/* Scroll drift: CSS scroll-driven, zero listeners. Without support: a still image. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .tw-world img { animation: tw-drift linear both; animation-timeline: view(); }
  }
}
@keyframes tw-drift { from { translate: 0 20px; } to { translate: 0 -20px; } }

/* Breathing at rest: the lamp swells and settles; the daylight lifts, barely. */
.tw-world::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; }
.tw-world--p::before { background: radial-gradient(34% 28% at 54% 38%, rgba(255, 196, 110, .17), transparent 72%); }
.tw-world--b::before { background: linear-gradient(100deg, rgba(255, 226, 180, .07), transparent 55%); }
.tw.settled .tw-world--p::before { animation: tw-lamp 5.2s ease-in-out infinite alternate; }
.tw.settled .tw-world--b::before { animation: tw-day 9s ease-in-out infinite alternate; }
@keyframes tw-lamp { from { opacity: 0; } to { opacity: 1; } }
@keyframes tw-day { from { opacity: 0; } to { opacity: .9; } }

/* Point at a world and it answers; the other steps back. */
.tw.settled .tw-world { transition: filter .5s ease, clip-path .5s cubic-bezier(.25,.8,.25,1); }
.tw.settled[data-lean="b"] .tw-world--b { filter: brightness(1.05); }
.tw.settled[data-lean="b"] .tw-world--p { filter: brightness(.74) saturate(.92); }
.tw.settled[data-lean="p"] .tw-world--p { filter: brightness(1.05); }
.tw.settled[data-lean="p"] .tw-world--b { filter: brightness(.74) saturate(.92); }

/* The seam: a thin orange blade of light. */
.tw-seam { position: absolute; inset-block: 0; left: calc(var(--seam) + 6%); width: 2px; background: linear-gradient(var(--record-amber, #f49f2e), rgba(244,159,46,.15)); transform: skewX(-6.8deg); transform-origin: top; transition: left .5s cubic-bezier(.25,.8,.25,1); pointer-events: none; }

/* The headline: centred, bold, typed once when the section enters. */
.tw-intro { position: absolute; z-index: 3; inset-inline: 0; inset-block-start: 0; padding: clamp(20px, 4.5vh, 52px) clamp(20px, 3.2vw, 52px) clamp(34px, 6vh, 72px); text-align: center; pointer-events: none; }
.tw-intro::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(4,9,14,.88) 0%, rgba(4,9,14,.5) 58%, rgba(4,9,14,0) 100%); }
.tw-intro h2 { margin: 0; font-family: "Instrument Serif", Newsreader, Georgia, serif; font-weight: 700; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.04; color: #f4efe4; text-shadow: 0 2px 6px rgba(4,9,14,.95), 0 6px 30px rgba(4,9,14,.8); min-height: 1.1em; }
.tw-intro .tw-w { color: var(--record-amber, #f49f2e); }
.tw-caret { display: none; width: .07em; height: .92em; margin-inline-start: .06em; background: var(--record-amber, #f49f2e); vertical-align: -.08em; animation: tw-blink 1s steps(1) infinite; }
html.tw-js .tw-caret { display: inline-block; }
@keyframes tw-blink { 50% { opacity: 0; } }

/* The copy. Business reads from the left, private from the right - the owner's
   order. Every tappable line clears 44px; taps are instant; focus is visible. */
.tw-side { position: absolute; z-index: 2; inset-block-end: clamp(20px, 4vh, 48px); max-width: 40%; }
.tw-side--b { inset-inline-start: clamp(20px, 3vw, 48px); }
.tw-side--p { inset-inline-end: clamp(20px, 3vw, 48px); text-align: end; }
.tw-side small { display: block; font-family: Manrope, system-ui, sans-serif; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--record-amber, #f49f2e); }
[dir="rtl"] .tw-side small { letter-spacing: 0; }
.tw-side h3 { margin: 8px 0 0; font-family: "Instrument Serif", Newsreader, Georgia, serif; font-weight: 400; font-size: clamp(1.9rem, 3.2vw, 3rem); line-height: 1.04; color: #f4efe4; text-shadow: 0 2px 14px rgba(4,9,14,.8); }
.tw-side ul { list-style: none; margin: 14px 0 0; padding: 0; }
.tw-side li a { display: block; padding-block: 12px; min-height: 44px; touch-action: manipulation; color: #f4efe4; font-family: Manrope, system-ui, sans-serif; font-weight: 600; font-size: clamp(1rem, 1.15vw, 1.08rem); line-height: 1.35; text-decoration: none; text-shadow: 0 1px 10px rgba(4,9,14,.85); }
/* The underline is drawn ink: it sweeps in on arrival and turns orange on hover. */
.tw-side li a span {
  background-image: linear-gradient(rgba(244,239,228,.4), rgba(244,239,228,.4)), linear-gradient(var(--record-amber, #f49f2e), var(--record-amber, #f49f2e));
  background-repeat: no-repeat;
  background-position: 0 100%, 0 100%;
  background-size: 100% 1px, 0% 2px;
  padding-block-end: 5px;
  transition: background-size .45s cubic-bezier(.25,.8,.25,1);
}
[dir="rtl"] .tw-side li a span { background-position: 100% 100%, 100% 100%; }
.tw-side li a:hover span, .tw-side li a:focus-visible span { background-size: 100% 1px, 100% 2px; }
.tw-side li a:focus-visible { outline: 2px solid var(--record-amber, #f49f2e); outline-offset: 3px; }
.tw-side .tw-go { display: inline-block; margin-top: 16px; padding: 13px 24px; border-radius: 999px; min-height: 44px; touch-action: manipulation; background: var(--record-amber, #f49f2e); color: #1a1006; font-family: Manrope, system-ui, sans-serif; font-weight: 700; text-decoration: none; }
.tw-side .tw-go:hover { background: #ffb85c; }
.tw-side .tw-go:focus-visible { outline: 2px solid #f4efe4; outline-offset: 3px; }

/* --------------------------------------------------------------------------
   Entrance states - gated behind html.tw-js. A script failure ships the
   finished section, never a black page.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html.tw-js .tw-seam { transform: skewX(-6.8deg) scaleY(0); }
  html.tw-js .tw.lit .tw-seam { transform: skewX(-6.8deg) scaleY(1); transition: transform .55s cubic-bezier(.3,.7,.3,1) .1s, left .5s cubic-bezier(.25,.8,.25,1); }
  html.tw-js .tw-world { filter: brightness(.14); }
  html.tw-js .tw-world--b { transform: translateX(-8vw); }
  html.tw-js .tw-world--p { transform: translateX(8vw); }
  html.tw-js .tw-world.in { transform: translateX(0); filter: brightness(1); transition: transform .9s cubic-bezier(.25,.8,.25,1), filter 1s ease .5s; }
  html.tw-js .tw-world--p.in { transition-delay: 0s, .62s; }
  html.tw-js .tw-side > * { opacity: 0; translate: 0 16px; }
  html.tw-js .tw-side.in > * { opacity: 1; translate: 0 0; transition: opacity .5s ease, translate .5s cubic-bezier(.25,.8,.25,1); }
  html.tw-js .tw-side.in > :nth-child(1) { transition-delay: .95s; }
  html.tw-js .tw-side.in > :nth-child(2) { transition-delay: 1.08s; }
  html.tw-js .tw-side.in > :nth-child(3) { transition-delay: 1.21s; }
  html.tw-js .tw-side.in > :nth-child(4) { transition-delay: 1.5s; }
  html.tw-js .tw-side li a span { background-size: 0% 1px, 0% 2px; }
  html.tw-js .tw-side.in li:nth-child(1) a span { transition-delay: 1.25s; }
  html.tw-js .tw-side.in li:nth-child(2) a span { transition-delay: 1.38s; }
  html.tw-js .tw-side.in li:nth-child(3) a span { transition-delay: 1.51s; }
  html.tw-js .tw-side.in li a span { background-size: 100% 1px, 0% 2px; }
  html.tw-js .tw-side.in li a:hover span, html.tw-js .tw-side.in li a:focus-visible span { background-size: 100% 1px, 100% 2px; transition-delay: 0s; }
}
@media (prefers-reduced-motion: reduce) {
  .tw-caret, html.tw-js .tw-caret { display: none; }
}

/* Phone and squat windows: a grid stacks each photo-world with its copy in one
   cell - no viewport arithmetic, nothing can clip. The seam lies down. */
@media (max-width: 860px) {
  .tw { display: grid; grid-template-areas: "intro" "wb" "seam" "wp"; min-height: auto; }
  .tw-intro { position: relative; grid-area: intro; padding: 26px 20px; pointer-events: auto; }
  .tw-intro::before { background: #061019; }
  .tw-world, .tw-side { position: relative; inset: auto; }
  .tw-world--b { grid-area: wb; }
  .tw-world--p { grid-area: wp; }
  .tw-world { clip-path: none; min-height: 78svh; transform: none !important; }
  .tw-world img { position: absolute; }
  .tw-world--b img, .tw-world--p img { object-position: 50% 26%; }
  .tw-side--b { grid-area: wb; text-align: start; }
  .tw-side--p { grid-area: wp; text-align: end; }
  .tw-side { align-self: end; max-width: none; margin: 0; padding: 0 20px 26px; }
  .tw-seam { grid-area: seam; position: relative; inset: auto; left: 0; width: 100%; height: 2px; margin-block: -1px; z-index: 4; transform: skewY(-2.2deg); transform-origin: left; background: linear-gradient(90deg, var(--record-amber, #f49f2e), rgba(244,159,46,.2)); }
  @media (prefers-reduced-motion: no-preference) {
    html.tw-js .tw-seam { transform: skewY(-2.2deg) scaleX(0); }
    html.tw-js .tw.lit .tw-seam { transform: skewY(-2.2deg) scaleX(1); transition: transform .6s cubic-bezier(.3,.7,.3,1) .1s; }
  }
}