/* =====================================================================
   Saudia case: additions to Direction B (b-shell.css + b.css).
   Same type, reveals and scene grammar as İşCep; the colour field is
   Saudia's own: deep green, sand, ink, and gold for the Alfursan moment.
   ===================================================================== */
body.sa { --sa-green: #0f3a2e; --sa-sand: #ece3cf; --sa-gold: #b3955b; --sa-ink: #121010; --b-amber: #d0ac64; }
body.b.sa[data-tone="green"] { --bg: var(--sa-green); --fg: #f1ead9; }
body.b.sa[data-tone="sand"] { --bg: var(--sa-sand); --fg: #1d1912; }
body.b.sa[data-tone="gold"] { --bg: var(--sa-gold); --fg: #17130c; }
body.b.sa[data-tone="ink"] { --bg: var(--sa-ink); --fg: #f1ead9; }
body.b.sa[data-tone="field"] { --bg: #a3874f; --fg: #f6efe0; }

/* ---------- hero: green field, giant title behind the splash ---------- */
.sa-hero { position: relative; overflow: hidden; isolation: isolate; background: var(--sa-green); color: #f1ead9; }
.sa-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 70% at 50% 108%, rgba(208,172,100,.30), transparent 62%), radial-gradient(55% 60% at 8% 0%, rgba(0,0,0,.32), transparent 70%); }
.sa-hero .chip i { background: var(--b-amber); }
.sa-hero .c-title { font-size: clamp(140px, 27vw, 470px); }

/* ---------- screens: old app at 1x, kept small and in its own colours ---------- */
.sa .shot.sa-old img { filter: saturate(.7) brightness(.97) drop-shadow(0 30px 34px rgba(0,0,0,.42)); }
.sa .shot.sa-new img { filter: drop-shadow(0 30px 34px rgba(0,0,0,.42)); }
.sa .shot figcaption { text-align: center; }
.sa-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: clamp(40px, 7vw, 120px); align-items: center; }
.sa-duo .read.serif { max-width: 17ch; font-size: clamp(32px, 3.4vw, 54px); }
.sa-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 240px)); gap: clamp(14px, 2vw, 28px); align-items: start; justify-content: center; }
.sa-pair .shot:nth-child(2) { margin-top: 18%; }
.sa-four { display: grid; grid-template-columns: repeat(4, minmax(0, 220px)); gap: clamp(10px, 2.2vw, 34px); justify-content: center; align-items: start; }
.sa-four .shot:nth-child(even) { margin-top: 9%; }
.sa-four.three { grid-template-columns: repeat(3, minmax(0, 220px)); }
/* overview: the review quote stands where İşCep has its big number */
.facts .fact-quote b { font: italic 400 clamp(40px, 3.7vw, 62px)/1 var(--b-serif); letter-spacing: -.02em; max-width: 11ch; margin-bottom: 14px; text-wrap: balance; }

/* ---------- two directions: one pinned stage, three devices that turn over
   from direction A to direction B as you scroll; large, the trio fills the screen ---------- */
.sa-dirs { position: relative; height: 320vh; }
.d-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.d-row { position: absolute; left: 0; right: 0; top: 150px; bottom: 92px; display: flex; align-items: center; justify-content: center; gap: clamp(24px, 2.8vw, 48px); }
.d-label { position: absolute; left: 0; right: 0; top: -84px; margin: 0; text-align: center; font: italic 400 clamp(28px, 2.6vw, 42px)/1 var(--b-serif); letter-spacing: -.01em; transition: opacity .5s var(--b-out), filter .5s var(--b-out), transform .6s var(--b-out); }
.d-label.l2 { opacity: 0; filter: blur(8px); transform: translateY(8px); }
.d-stage.b .d-label.l1 { opacity: 0; filter: blur(8px); transform: translateY(-8px); }
.d-stage.b .d-label.l2 { opacity: 1; filter: none; transform: none; }
.d-slot { width: min(25vw, calc((100vh - 252px) / 1.99)); width: min(25vw, calc((100svh - 252px) / 1.99)); flex: none; opacity: var(--in, 1); transform: translateY(calc((1 - var(--in, 1)) * 70px)); filter: blur(calc((1 - var(--in, 1)) * 12px)); }
.d-flip { position: relative; display: grid; }
/* A and B share each slot and crossfade; nothing turns or squashes */
.d-face { grid-area: 1 / 1; margin: 0; align-self: end; }
.d-face.f2 { opacity: 0; }
.rm .sa-dirs { height: auto; }
.rm .d-stage { position: relative; height: auto; perspective: none; padding: 12vh 0; }
.rm .d-row { position: static; display: grid; grid-template-columns: repeat(3, minmax(0, 300px)); justify-content: center; row-gap: 5vh; }
.rm .d-slot, .rm .d-flip { display: contents; }
.rm .d-label { position: static; grid-column: 1 / -1; opacity: 1 !important; filter: none !important; transform: none !important; }
.rm .d-label.l1 { grid-row: 1; } .rm .d-label.l2 { grid-row: 3; margin-top: 6vh; }
.rm .d-face { opacity: 1 !important; } .rm .d-face.f1 { grid-row: 2; } .rm .d-face.f2 { grid-row: 4; }

/* ---------- decisions ---------- */
.sa-dec .scene h3, .sa-dec h3 { font-size: clamp(42px, 4.6vw, 78px); max-width: 12ch; }
.sa-dec-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 6vw, 110px); align-items: center; }
.sa-dec-grid.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.sa-dec-grid.flip > .sa-dec-txt { order: 2; }
.sa-dec-txt .read { font-size: clamp(19px, 1.55vw, 23px); }
.sa-ba { display: flex; justify-content: center; align-items: flex-end; gap: clamp(14px, 2.4vw, 36px); }
.sa-ba .sa-old { width: clamp(190px, 21vw, 310px); flex: none; }
.sa-ba .sa-new { width: clamp(190px, 21vw, 310px); flex: none; }
.sa-ba.three { display: grid; grid-template-columns: minmax(0, .74fr) minmax(0, 1fr) minmax(0, 1fr); align-items: end; width: min(100%, 760px); margin: 0 auto; }
.sa-ba.three .sa-new + .sa-new { margin-bottom: 8%; }
.sa-ba.three .sa-old, .sa-ba.three .sa-new { width: auto; }
.sa-ba.pair { margin-top: 8vh; align-items: flex-start; }
.sa-ba.pair .sa-new { width: clamp(200px, 19vw, 270px); }
.sa-ba.pair .sa-new + .sa-new { margin-top: 70px; }
.center .read { margin-left: auto; margin-right: auto; }
.center h3 { margin-left: auto; margin-right: auto; }

/* decision 02: the route card with a pencil ring on the swap button */
.sa-route { width: min(662px, 100%); }
.b .sa-route { margin: clamp(64px, 11vh, 120px) auto 64px; }
.b .sa-route img { background: none; border-radius: 0; box-shadow: none; filter: drop-shadow(0 30px 40px rgba(0,0,0,.45)); } /* the two route tiles on their own, without the photo band cut off behind them */
.sa-route .ring { left: 38.4%; top: 27.2%; width: 23.6%; height: 45.6%; }
.sa-route .note-cap { left: 50%; top: auto; bottom: calc(100% + 14px); transform: translateX(-50%); color: var(--b-amber); }

/* decision 04: wipe sized to the old 1x screen */
.sa-wipe { width: min(340px, 78vw); }
.sa-wipe .ph { aspect-ratio: 375 / 667; border-radius: 9.8% / 5.51%; }
.sa-wipe .w-in img { filter: saturate(.7) brightness(.97); }
.sa-wipe .w-new, .sa-wipe .w-in img { object-fit: cover; object-position: top; }

/* ---------- scroll-through window for long captures ---------- */
.sa-scroll { position: relative; aspect-ratio: 640 / 1138; border-radius: 9.8% / 5.51%; overflow: hidden; background: #f4f4f4; isolation: isolate; filter: drop-shadow(0 30px 34px rgba(0,0,0,.42)); transform: translateZ(0); }
.sa .shot .sa-scroll img { filter: none; }
.sa-scroll .hd { position: absolute; left: 0; top: 0; width: 100%; height: auto; z-index: 2; }
.sa-scroll .bd { position: absolute; left: 0; top: 0; width: 100%; height: auto; will-change: transform; }
.sa-scroll.play .bd { animation: sa-scroll 9s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes sa-scroll { 0%, 14% { transform: translateY(0); } 50%, 64% { transform: translateY(var(--end)); } 100% { transform: translateY(0); } }

/* ---------- Alfursan: three tiers, pinned, card → virtual card → dial ---------- */
.sa-tiers { position: relative; height: 360vh; }
.sa-tiers .t-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.t-state { position: absolute; left: 0; right: 0; top: 12vh; display: flex; justify-content: center; gap: 22px; font: italic 400 22px/1 var(--b-serif); }
.t-state span { position: relative; opacity: .4; transition: opacity .45s var(--b-out); }
.t-state span::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: -4px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--b-out); }
.t-stage[data-st="0"] [data-s="0"], .t-stage[data-st="1"] [data-s="1"], .t-stage[data-st="2"] [data-s="2"] { opacity: 1; }
.t-stage[data-st="0"] [data-s="0"]::after, .t-stage[data-st="1"] [data-s="1"]::after, .t-stage[data-st="2"] [data-s="2"]::after { transform: none; }
.t-rows { position: absolute; left: var(--gut); right: var(--gut); top: 18vh; bottom: 10vh; max-width: 1400px; margin: 0 auto; }
.t-row { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(30px, 5vw, 90px); align-items: center; pointer-events: none; }
.t-note { font: 400 clamp(26px, 2.5vw, 40px)/1.12 var(--b-serif); letter-spacing: -.01em; max-width: 19ch; }
.t-phones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 2vw, 30px); height: 100%; align-items: center; justify-items: center; }
.t-phones figure { margin: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 0; }
.t-phones img { height: auto; max-height: calc(100% - 34px); width: auto; max-width: 100%; aspect-ratio: 560 / 996; object-fit: contain; filter: drop-shadow(0 30px 34px rgba(40,26,0,.42)); }
.t-phones figcaption { margin-top: 14px; font: 500 12px/1.2 var(--b-sans); letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.t-credit { position: absolute; right: var(--gut); bottom: 4vh; font: italic 400 17px/1 var(--b-serif); opacity: .75; }
/* swap: blur to sharp, staggered across the three tiers */
.js .t-row .t-note, .js .t-row figure { opacity: 0; filter: blur(var(--blur)); transform: translateY(16px); transition: opacity .7s var(--b-out), transform .8s var(--b-out), filter .7s var(--b-out); }
.js .t-row figure { transition-delay: calc(var(--i) * 70ms); }
.js .t-stage[data-st="0"] .t-row[data-st="0"] :is(.t-note, figure),
.js .t-stage[data-st="1"] .t-row[data-st="1"] :is(.t-note, figure),
.js .t-stage[data-st="2"] .t-row[data-st="2"] :is(.t-note, figure) { opacity: 1; filter: blur(0); transform: none; }
.js .t-stage[data-st="0"] .t-row[data-st="0"] .t-note,
.js .t-stage[data-st="1"] .t-row[data-st="1"] .t-note,
.js .t-stage[data-st="2"] .t-row[data-st="2"] .t-note { transition-delay: .15s; }

.sa-win { aspect-ratio: 622 / 1104; border-radius: 9.8% / 5.52%; overflow: hidden; background: #f4f4f4; filter: drop-shadow(0 34px 40px rgba(0,0,0,.6)); transform: translateZ(0); }
.sa-win video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- design process: a drifting wall of screens ---------- */
.sa-wall { overflow: hidden; overflow: clip; padding: 8vh 0; display: grid; gap: clamp(12px, 1.6vw, 22px); }
.sa-wall .w-row { display: flex; gap: clamp(12px, 1.6vw, 22px); width: max-content; transform: translateX(calc(-8vw + (var(--s, .5) - .5) * var(--dir) * 34vw)); }
.sa-wall .w-row:nth-child(2) { margin-left: -12vw; }
.rm .sa-wall .w-row { transform: translateX(-4vw); }

/* ---------- final screens ---------- */
.sa-fin { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 80px clamp(24px, 4vw, 64px); width: min(940px, 100%); margin: 0 auto; align-items: start; }
.sa-fin .shot:nth-child(3n+2) { margin-top: 90px; }
.sa-fin .shot img { filter: drop-shadow(0 34px 40px rgba(0,0,0,.6)); }


/* ---------- reduced motion: tiers unpin into three rows ---------- */
.rm .sa-tiers { height: auto; }
.rm .sa-tiers .t-stage { position: relative; height: auto; overflow: visible; padding: 10vh 0 12vh; }
.rm .t-state { display: none; }
.rm .t-rows { position: static; }
.rm .t-row { position: relative; inset: auto; height: 74vh; margin-bottom: 10vh; }
.rm .t-row .t-note, .rm .t-row figure { opacity: 1 !important; filter: none !important; transform: none !important; }
.rm .t-credit { position: static; text-align: right; padding: 0 var(--gut); }
.rm .sa-scroll { overflow-y: auto; }
.rm .sa-scroll .bd { position: relative; animation: none; }
.rm .sa-scroll .hd { position: sticky; }
@media (prefers-reduced-motion: reduce) { .sa-scroll.play .bd { animation: none; } }

/* ---------- touch: long captures can be scrolled by hand ---------- */
@media (hover: none) {
  .sa-scroll.touched { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .sa-scroll.touched .bd { position: relative; animation: none; }
  .sa-scroll.touched .hd { position: sticky; }
}

/* ---------- phone ---------- */
@media (max-width: 860px) {
  .sa-dirs { height: 300vh; }
  /* phones: not pinned; each direction is a swipeable row of large devices under its label */
  .sa-dirs { height: auto; }
  .d-stage { position: relative; height: auto; overflow: visible; padding: 10vh 0 calc(12vh + 64px); }
  .d-row { position: static; display: grid; justify-content: start; align-items: end; grid-template-columns: repeat(3, 70vw); column-gap: 4vw; row-gap: 2.5vh; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 15vw 6px; }
  .d-row::-webkit-scrollbar { display: none; }
  .d-slot, .d-flip { display: contents; }
  .d-label { position: sticky; left: 0; grid-column: 1 / -1; justify-self: start; width: max-content; top: auto; opacity: 1 !important; filter: none !important; transform: none !important; text-align: left; font-size: 26px; }
  .d-label.l1 { grid-row: 1; } .d-label.l2 { grid-row: 3; margin-top: 6vh; }
  .d-face { grid-column: auto; opacity: 1 !important; scroll-snap-align: center; } .d-face.f1 { grid-row: 2; } .d-face.f2 { grid-row: 4; }
  .rm .d-row { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 8px; padding: 0 var(--gut); }
  .sa-hero .c-title { font-size: 30vw; }
  .sa-duo { grid-template-columns: minmax(0, 1fr); gap: 7vh; }
  .sa-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 360px); margin: 0 auto; }
  .sa-four { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 360px); margin: 0 auto; gap: 14px; }
  .sa-four .shot:nth-child(even) { margin-top: 22px; }
  .sa-four.three { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: 10px; }
  .facts .fact-quote b { font-size: 40px; }
  .sa-dec-grid, .sa-dec-grid.flip { grid-template-columns: minmax(0, 1fr); gap: 7vh; }
  .sa-dec-grid.flip > .sa-dec-txt { order: 0; }
  .sa-dec-txt .read { font-size: 19px; }
  .sa-ba { gap: 10px; }
  .sa-ba .sa-old, .sa-ba .sa-new { width: 44vw; max-width: 220px; }
  .sa-ba.three { gap: 8px; }
  .sa-ba.three .sa-old, .sa-ba.three .sa-new { width: auto; max-width: none; }
  .sa-ba.pair .sa-new { width: 42vw; }
  .sa-ba.pair .sa-new + .sa-new { margin-top: 40px; }
  .b .sa-route { margin: 56px auto 48px; }
  .sa-route .note-cap { left: 50%; top: auto; bottom: calc(100% + 10px); font-size: 18px; }
  .t-state { top: 10vh; font-size: 18px; gap: 14px; }
  .t-rows { top: 16vh; bottom: 8vh; }
  .t-row { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; gap: 4vh; }
  .t-row .t-phones { order: 1; height: auto; gap: 8px; }
  .t-row .t-note { order: 2; font-size: 20px; max-width: none; text-align: center; }
  .t-phones figure { height: auto; }
  .t-phones img { max-height: none; width: 100%; }
  .t-phones figcaption { font-size: 10px; letter-spacing: .1em; }
  .t-credit { left: var(--gut); right: auto; bottom: 76px; font-size: 15px; }
  .rm .t-row { height: auto; }
  .sa-fin { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 14px; }
  .sa-fin .shot:nth-child(3n+2) { margin-top: 0; }
  .sa-fin .shot:nth-child(even) { margin-top: 40px; }
  .sa-fin .sa-loop { grid-column: 1 / -1; width: calc(50% - 7px); justify-self: center; margin-top: 0; }
}


/* ---------- the Alfursan moment: the Elite Plus card lifting out of the loyalty tab ---------- */
.alf-moment { position: relative; }
.alf-kv { position: relative; height: 100vh; height: 100svh; min-height: 620px; container-type: size; overflow: hidden; --rx: 50cqw; --ry: 50cqh; }
.alf-kv .kv-rig { width: min(30cqw, 42cqh); transform: translate(-50%, -50%); }
.alf-kv .alf-pop { left: -46%; top: 10%; width: 92%; transform: rotate(-6deg); filter: drop-shadow(0 34px 44px rgba(40,26,0,.45)); }
@media (max-width: 860px) {
  .alf-kv .kv-rig { width: min(56cqw, 42cqh); transform: translate(-36%, -50%); }
  .alf-kv .alf-pop { left: -30%; top: 9%; width: 84%; }
}

/* the eyebrow sits a clear step above each headline */
.b.sa p.k { margin-bottom: 22px; }