/* gibreen.com — motion prototype, 2026-10-04.
   Layered on top of site.css. No library: CSS keyframes, the Web Animations
   API and IntersectionObserver. Everything here switches off under
   prefers-reduced-motion, and nothing here is required to read the page. */

:root {
  --petrol: #0E547B;          /* Stride-Brand §1, inherited by Gibreen-Identity */
  --petrol-glow: rgba(14, 84, 123, 0.35);
}

/* ── Wordmark: one mark, both languages (Gibreen-Identity, 2026-09-22) ─────── */
.logo { display: inline-flex; align-items: center; gap: 0.6rem; }
.logo .wordmark { height: 26px; width: auto; display: block; fill: var(--text); transition: fill 0.25s ease; }
.logo:hover .wordmark { fill: var(--amber); }
.logo .mark-tile {
  width: 30px; height: 30px; border-radius: 7px; background: var(--petrol);
  display: grid; place-items: center; flex-shrink: 0;
}
.logo .mark-tile svg { height: 18px; width: auto; fill: #fff; }
.site-footer .logo .wordmark { height: 22px; }

/* ── Background: the orbs drift, the grid breathes ─────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .orb-1 { animation: drift-a 26s ease-in-out infinite alternate; }
  .orb-2 { animation: drift-b 31s ease-in-out infinite alternate; }
  .grid-bg::before { animation: grid-breathe 14s ease-in-out infinite alternate; }
}
@keyframes drift-a { from { transform: translate(0, 0) scale(1); } to { transform: translate(9vw, 6vh) scale(1.18); } }
@keyframes drift-b { from { transform: translate(0, 0) scale(1); } to { transform: translate(-7vw, -8vh) scale(1.12); } }
@keyframes grid-breathe { from { opacity: 0.3; } to { opacity: 0.5; } }

/* A soft spotlight that follows the pointer across the hero. */
.hero { position: relative; overflow: visible; }
.hero::before {
  content: ''; position: absolute; inset: -10% -20%; pointer-events: none; z-index: -1;
  background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 30%),
              rgba(212, 165, 116, 0.09), transparent 60%);
  transition: background-position 0.2s ease;
}

/* ── Hero text: words rise in, the accent sweeps in ────────────────────────── */
/* Tighter than the live page so the pipeline is on screen at 1280×800. */
.hero { padding: 2.5rem 1.5rem 2.5rem; }
.hero .hero-badge { margin-bottom: 1rem; }
.hero h1 { margin-bottom: 1rem; font-size: clamp(2.1rem, 4.6vw, 3.3rem); }
.hero .lede { margin-bottom: 1.4rem; max-width: 66ch; font-size: clamp(1rem, 1.8vw, 1.12rem); }
.hero h1 .w { display: inline-block; opacity: 0; transform: translateY(0.55em) rotate(2deg); }
/* background-clip:text does not paint through transformed inline-block children,
   so each word inside the accent carries the gradient itself. */
.hero h1 .accent { background: none; -webkit-text-fill-color: currentColor; color: var(--amber); }
.hero h1 .accent .w {
  background: linear-gradient(135deg, var(--amber) 0%, #E8C9A0 50%, var(--amber) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero h1 .w.in { animation: word-in 0.7s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes word-in { to { opacity: 1; transform: none; } }
.hero h1 .accent { position: relative; }
.hero .hero-badge, .hero .lede, .hero .btn-row { opacity: 0; transform: translateY(14px); }
.hero .hero-badge.in, .hero .lede.in, .hero .btn-row.in { animation: rise 0.8s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* The primary button carries a slow sheen. */
@media (prefers-reduced-motion: no-preference) {
  .btn:not(.btn-ghost) { position: relative; overflow: hidden; }
  .btn:not(.btn-ghost)::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.35) 50%, transparent 65%);
    transform: translateX(-120%);
    animation: sheen 5s ease-in-out 2s infinite;
  }
  @keyframes sheen { 0%, 60% { transform: translateX(-120%); } 80%, 100% { transform: translateX(120%); } }
}

/* ── The signature: a job travels through agents and stops at the gate ─────── */
.pipeline {
  max-width: 940px; margin: 2rem auto 0; padding: 0 1rem;
  opacity: 0; transform: translateY(20px);
}
.pipeline.in { animation: rise 0.9s cubic-bezier(.2,.8,.2,1) 0.55s forwards; }
.pipeline svg { width: 100%; height: auto; display: block; overflow: visible; }
/* Phones: the strip keeps a readable size and scrolls sideways; the script
   parks the view on the gate. A stacked vertical layout is the open question. */
@media (max-width: 720px) {
  .pipeline { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding: 0 1rem; }
  .pipeline::-webkit-scrollbar { display: none; }
  .pipeline svg { min-width: 760px; }
}
.pipeline text { font-family: 'Inter', system-ui, sans-serif; }
.pipeline .track { stroke: var(--border); stroke-width: 2; fill: none; }
.pipeline .track-lit { stroke: var(--amber); stroke-width: 2; fill: none; stroke-dasharray: 1; stroke-dashoffset: 1; pathLength: 1; }
.pipeline .node rect { fill: var(--bg-card); stroke: var(--border); stroke-width: 1.5; transition: stroke 0.3s ease, filter 0.3s ease; }
.pipeline .node.lit rect { stroke: var(--amber); filter: drop-shadow(0 0 14px rgba(212,165,116,0.35)); }
.pipeline .node .t { fill: var(--text); font-size: 13px; font-weight: 600; }
.pipeline .node .s { fill: var(--text-dim); font-size: 11px; }
.pipeline .node.lit .s { fill: var(--amber); }
.pipeline .node .ring { fill: none; stroke: var(--amber); stroke-width: 1.5; opacity: 0; }
.pipeline .node.lit .ring { animation: ring 0.9s ease-out; }
@keyframes ring { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(1.35); } }
.pipeline .node .ring { transform-box: fill-box; transform-origin: center; }

.pipeline .token rect { fill: var(--bg-surface); stroke: var(--amber); stroke-width: 1.5; }
.pipeline .token text { fill: var(--text); font-size: 11.5px; font-weight: 600; }
.pipeline .token .sub { fill: var(--text-dim); font-weight: 400; font-size: 10.5px; }

.pipeline .gate .post { fill: var(--purple); }
.pipeline .gate .bar { fill: var(--purple); transition: transform 0.6s cubic-bezier(.6,0,.2,1); transform-box: fill-box; }
.pipeline .gate.open .bar-top { transform: translateY(-26px); }
.pipeline .gate.open .bar-bot { transform: translateY(26px); }
.pipeline .gate .glow { fill: var(--purple); opacity: 0.18; filter: blur(14px); transition: opacity .4s; }
.pipeline .gate.asking .glow { opacity: 0.45; }
.pipeline .gate .lbl { fill: var(--purple); font-size: 11px; font-weight: 700; letter-spacing: .12em; }

.pipeline .ask { opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; }
.pipeline .ask.show { opacity: 1; transform: none; }
.pipeline .ask rect.panel { fill: var(--bg-card); stroke: var(--purple); stroke-width: 1.5; }
.pipeline .ask .q { fill: var(--text); font-size: 12px; font-weight: 600; }
.pipeline .ask .d { fill: var(--text-dim); font-size: 10.5px; }
.pipeline .ask .opt rect { fill: transparent; stroke: var(--border); stroke-width: 1; transition: fill .3s, stroke .3s; }
.pipeline .ask .opt text { fill: var(--text-mid); font-size: 10.5px; font-weight: 600; }
.pipeline .ask .opt.pick rect { fill: var(--amber); stroke: var(--amber); }
.pipeline .ask .opt.pick text { fill: var(--bg); }

.pipeline .done rect { fill: var(--bg-card); stroke: var(--border); stroke-width: 1.5; transition: stroke .3s; }
.pipeline .done.lit rect { stroke: var(--green); filter: drop-shadow(0 0 14px rgba(111,191,139,0.3)); }
.pipeline .done .t { fill: var(--text); font-size: 13px; font-weight: 600; }
.pipeline .done .s { fill: var(--text-dim); font-size: 11px; }
.pipeline .done.lit .s { fill: var(--green); }
.pipeline .done .tick { fill: none; stroke: var(--green); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 30; stroke-dashoffset: 30; }
.pipeline .done.lit .tick { animation: tick .5s ease-out .1s forwards; }
@keyframes tick { to { stroke-dashoffset: 0; } }

.pipeline .caption { fill: var(--text-faint); font-size: 11px; letter-spacing: .14em; font-weight: 600; }
.pipeline .caption.live { fill: var(--amber); }

/* Arabic mirror: the job flows the way the reader reads. The track flips;
   the text inside each group is flipped back by the script (data-flip). */
[dir="rtl"] .pipeline svg { transform: scaleX(-1); }
[dir="rtl"] .pipeline [data-flip] { transform: scaleX(-1); transform-box: fill-box; transform-origin: center; }

/* ── Scroll reveals ─────────────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal-stagger > * { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal-stagger.in > * { opacity: 1; transform: none; }
.reveal-stagger.in > *:nth-child(1) { transition-delay: .05s; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: .17s; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: .29s; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: .41s; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: .53s; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: .65s; }
.reveal-stagger.in > *:nth-child(7) { transition-delay: .77s; }
.reveal-stagger.in > *:nth-child(8) { transition-delay: .89s; }

/* Section labels get an underline that draws itself. */
.section-label { position: relative; display: inline-block; padding-bottom: .35rem; }
.section-label::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: linear-gradient(90deg, var(--amber), transparent);
  transform: scaleX(0); transform-origin: left; transition: transform .9s cubic-bezier(.2,.8,.2,1) .2s;
}
[dir="rtl"] .section-label::after { transform-origin: right; background: linear-gradient(270deg, var(--amber), transparent); }
.in .section-label::after, .section-label.in::after { transform: scaleX(1); }

/* The divider line draws from the centre outwards. */
.divider { transform: scaleX(0); transition: transform 1.1s cubic-bezier(.2,.8,.2,1); }
.divider.in { transform: scaleX(1); }

/* Cards: hover lifts a little more and the number glows. */
.card { transition: border-color .35s ease, transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease; }
.card:hover { transform: translateY(-5px); box-shadow: 0 18px 44px rgba(0,0,0,.35), 0 0 0 1px rgba(212,165,116,.18); }
.card .num { transition: color .3s ease, text-shadow .3s ease; }
.card:hover .num { color: var(--amber); text-shadow: 0 0 18px rgba(212,165,116,.45); }

/* Figures: the chart draws its own lines when it scrolls into view. */
.figure-frame path.draw { stroke-dasharray: 2000; stroke-dashoffset: 2000; }
.in .figure-frame path.draw { animation: draw 2.2s cubic-bezier(.4,0,.2,1) .3s forwards; }
.in .figure-frame path.draw.late { animation-delay: .9s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.figure-frame [data-pop] { opacity: 0; transition: opacity .5s ease; }
.in .figure-frame [data-pop] { opacity: 1; transition-delay: 2.3s; }

/* Table rows arrive one by one. */
tbody tr { opacity: 0; transform: translateX(-10px); transition: opacity .55s ease, transform .55s ease; }
[dir="rtl"] tbody tr { transform: translateX(10px); }
.in tbody tr { opacity: 1; transform: none; }
.in tbody tr:nth-child(1) { transition-delay: .05s; } .in tbody tr:nth-child(2) { transition-delay: .13s; }
.in tbody tr:nth-child(3) { transition-delay: .21s; } .in tbody tr:nth-child(4) { transition-delay: .29s; }
.in tbody tr:nth-child(5) { transition-delay: .37s; } .in tbody tr:nth-child(6) { transition-delay: .45s; }
.in tbody tr:nth-child(7) { transition-delay: .53s; } .in tbody tr:nth-child(8) { transition-delay: .61s; }

/* Status words in the table get a small pulse where something is running. */
td.status-running { color: var(--green); font-weight: 600; white-space: nowrap; }
td.status-running::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--green); margin-inline-end: .5rem; vertical-align: middle; box-shadow: 0 0 0 0 rgba(111,191,139,.6); }
@media (prefers-reduced-motion: no-preference) { td.status-running::before { animation: pulse 2.2s ease-out infinite; } }
@keyframes pulse { 70% { box-shadow: 0 0 0 7px rgba(111,191,139,0); } 100% { box-shadow: 0 0 0 0 rgba(111,191,139,0); } }

/* The booking section: a small gate beside the heading, echoing the hero. */
.book-inner h2 { position: relative; }
.mini-gate { display: inline-block; vertical-align: middle; margin-inline-start: .6rem; width: 26px; height: 26px; }
.mini-gate rect { fill: var(--purple); transition: transform .6s cubic-bezier(.6,0,.2,1); transform-box: fill-box; }
.in .mini-gate .top { transform: translateY(-5px); }
.in .mini-gate .bot { transform: translateY(5px); }

/* ── Reduced motion: everything settles instantly ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero h1 .w, .hero .hero-badge, .hero .lede, .hero .btn-row, .pipeline,
  .reveal, .reveal-stagger > *, tbody tr, .figure-frame [data-pop] { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .divider { transform: none; transition: none; }
  .section-label::after { transform: scaleX(1); transition: none; }
  .figure-frame path.draw { stroke-dashoffset: 0; animation: none; }
  .hero::before { display: none; }
  .pipeline .track-lit { stroke-dashoffset: 0; }
}