/* ONE+ Events — V5 static site stylesheet (editorial-industrial)
   Source of visual truth: oneplus-v5-prototype.html, owner-approved. */
:root{
  --ink:            oklch(0.16 0.018 250);
  --ink-2:          oklch(0.20 0.020 250);
  --ink-3:          oklch(0.26 0.022 250);
  --paper:          oklch(0.95 0.008 250);
  --paper-dim:      oklch(0.72 0.012 250);
  --paper-faint:    oklch(0.64 0.014 250);
  --cyan:           oklch(0.78 0.16 220);
  --cyan-dim:       oklch(0.62 0.13 220);
  --line:           oklch(0.30 0.02 250 / 0.6);

  --font-display:   'Space Grotesk', 'IBM Plex Sans Arabic', sans-serif;
  --font-body:      'IBM Plex Sans Arabic', 'Space Grotesk', sans-serif;
  --font-mono:      'JetBrains Mono', monospace;
  --font-serif:     'Instrument Serif', serif;

  --ease:           cubic-bezier(0.16, 1, 0.3, 1);
  --maxw:           1360px;
}
:root[dir="rtl"]{ --font-display:'IBM Plex Sans Arabic', sans-serif; }

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--ink); color:var(--paper);
  font-family:var(--font-body); font-weight:400; line-height:1.5;
  overflow-x:hidden; letter-spacing:-0.01em;
  -webkit-font-smoothing:antialiased;
}
body.rtl{ letter-spacing:0; }
img{ max-width:100%; display:block; }
::selection{ background:var(--cyan); color:var(--ink); }

/* numbers/latin strings must stay LTR even inside an RTL document (FIX-1) */
bdi.ltr-num{ unicode-bidi:isolate; direction:ltr; display:inline-block; }

body::after{
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:0.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- NAV ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px clamp(20px,5vw,64px);
  mix-blend-mode:difference;
}
.nav-logo{ font-family:var(--font-display); font-weight:700; font-size:19px; letter-spacing:-0.03em; color:#fff; text-decoration:none; }
.nav-logo span{ color:var(--cyan); }
.nav-right{ display:flex; align-items:center; gap:clamp(16px,3vw,38px); }
.nav-link{ color:#fff; text-decoration:none; font-size:13px; font-weight:500; letter-spacing:0.01em; opacity:0.85; transition:opacity .3s var(--ease); }
.nav-link:hover{ opacity:1; }
.nav-clock{ font-family:var(--font-mono); font-size:12px; color:#fff; opacity:0.6; }
.lang-btn{
  font-family:var(--font-mono); font-size:12px; font-weight:500;
  background:none; border:1px solid rgba(255,255,255,.4); color:#fff;
  padding:5px 11px; border-radius:100px; cursor:pointer; transition:all .3s var(--ease);
}
.lang-btn:hover{ background:#fff; color:#000; }
@media(max-width:720px){ .nav-links,.nav-clock{ display:none; } }

/* ---------- HERO ---------- */
.hero{ position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; padding:0 clamp(20px,5vw,64px) clamp(40px,7vh,80px); overflow:hidden; }
#hero-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:0; transition:opacity 1.4s var(--ease); }
#hero-canvas.in{ opacity:0.9; }
.hero-veil{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, oklch(0.16 0.018 250/0.4) 0%, transparent 30%, oklch(0.16 0.018 250/0.85) 100%); pointer-events:none; }
.hero-inner{ position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; width:100%; }
.hero-eyebrow{
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--cyan); margin-bottom:28px; display:flex; align-items:center; gap:12px;
  opacity:0; transform:translateY(14px); animation:rise .9s var(--ease) .3s forwards;
}
.hero-eyebrow::before{ content:""; width:34px; height:1px; background:var(--cyan); display:inline-block; }
.hero h1{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(44px,9vw,132px); line-height:0.94; letter-spacing:-0.035em;
  text-wrap:balance; margin-bottom:34px;
}
.hero h1 .line{ display:block; overflow:hidden; }
.hero h1 .line > span{ display:block; transform:translateY(105%); animation:reveal 1s var(--ease) forwards; }
.hero h1 .line:nth-child(1) > span{ animation-delay:.45s; }
.hero h1 .line:nth-child(2) > span{ animation-delay:.57s; }
.hero h1 .line:nth-child(3) > span{ animation-delay:.69s; }
.hero h1 em{ font-family:var(--font-serif); font-style:italic; font-weight:400; color:var(--cyan); }
.hero-foot{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:24px; opacity:0; transform:translateY(14px); animation:rise .9s var(--ease) .95s forwards; }
.hero-sub{ font-size:clamp(15px,1.6vw,18px); color:var(--paper-dim); max-width:44ch; line-height:1.55; }
.hero-cta{
  display:inline-flex; align-items:center; gap:12px; font-family:var(--font-display); font-weight:600; font-size:15px;
  background:var(--cyan); color:var(--ink); text-decoration:none; padding:16px 26px; border-radius:100px;
  transition:transform .4s var(--ease), background .3s; white-space:nowrap;
}
.hero-cta:hover{ transform:translateY(-3px); background:var(--paper); }
.hero-cta .arr{ transition:transform .4s var(--ease); }
.hero-cta:hover .arr{ transform:translateX(4px); }
[dir="rtl"] .hero-cta:hover .arr{ transform:translateX(-4px); }

/* ---------- CLIENT MARQUEE ---------- */
.proof{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:26px 0; overflow:hidden; background:var(--ink); }
.proof-label{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--paper-faint); text-align:center; margin-bottom:20px; }
.marquee{ display:flex; gap:64px; width:max-content; animation:slide 34s linear infinite; }
.marquee:hover{ animation-play-state:paused; }
.marquee span{ font-family:var(--font-display); font-weight:600; font-size:clamp(20px,2.6vw,30px); color:var(--paper-faint); white-space:nowrap; transition:color .3s; letter-spacing:-0.02em; }
.marquee span:hover{ color:var(--paper); }

/* ---------- SECTION SHELL ---------- */
.section{ max-width:var(--maxw); margin:0 auto; padding:clamp(80px,12vh,160px) clamp(20px,5vw,64px); }
.sec-head{ display:flex; align-items:baseline; justify-content:space-between; gap:24px; margin-bottom:56px; flex-wrap:wrap; }
.sec-title{ font-family:var(--font-display); font-weight:600; font-size:clamp(28px,4vw,54px); letter-spacing:-0.03em; line-height:1.05; }
.sec-title em{ font-family:var(--font-serif); font-style:italic; font-weight:400; color:var(--cyan); }
.sec-index{ font-family:var(--font-mono); font-size:12px; color:var(--paper-faint); letter-spacing:0.1em; }

/* ---------- PORTFOLIO ---------- */
.work-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2vw,28px); }
.work-item{ position:relative; cursor:pointer; overflow:hidden; border-radius:6px; background:var(--ink-2); aspect-ratio:16/11; display:block; text-decoration:none; color:inherit; }
.work-item.wide{ grid-column:span 2; aspect-ratio:16/8; }
.work-media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease), filter .6s; filter:saturate(0.9) brightness(0.82); }
.work-item:hover .work-media{ transform:scale(1.05); filter:saturate(1.05) brightness(0.95); }
.work-grad{ position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%, oklch(0.16 0.018 250/0.92)); }
.work-meta{ position:absolute; left:0; right:0; bottom:0; padding:clamp(18px,2.4vw,32px); z-index:2; }
.work-client{ font-family:var(--font-display); font-weight:600; font-size:clamp(20px,2.4vw,30px); letter-spacing:-0.02em; margin-bottom:8px; }
.work-line{ font-family:var(--font-mono); font-size:12px; color:var(--cyan); letter-spacing:0.06em; display:flex; gap:8px; flex-wrap:wrap; }
.work-line .dot{ color:var(--paper-faint); }
.work-tag{ position:absolute; top:clamp(16px,2vw,24px); right:clamp(16px,2vw,24px); font-family:var(--font-mono); font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--paper); background:oklch(0.16 0.018 250/0.5); backdrop-filter:blur(6px); padding:6px 11px; border-radius:100px; border:1px solid var(--line); z-index:2; }
[dir="rtl"] .work-tag{ right:auto; left:clamp(16px,2vw,24px); }
@media(max-width:760px){ .work-grid{ grid-template-columns:1fr; } .work-item.wide{ grid-column:span 1; aspect-ratio:16/11; } }

/* ---------- R2R METHOD ---------- */
.method{ background:var(--ink-2); border-top:1px solid var(--line); }
.method-rail{ display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden; margin-top:8px; }
.method-step{ background:var(--ink-2); padding:clamp(28px,3vw,44px) clamp(20px,2vw,30px); min-height:280px; display:flex; flex-direction:column; justify-content:space-between; transition:background .5s var(--ease); position:relative; }
.method-step:hover{ background:var(--ink-3); }
.method-num{ font-family:var(--font-mono); font-size:13px; color:var(--cyan); letter-spacing:0.1em; }
.method-name{ font-family:var(--font-display); font-weight:600; font-size:clamp(20px,2vw,26px); letter-spacing:-0.02em; margin-top:auto; margin-bottom:10px; }
.method-desc{ font-size:14px; color:var(--paper-dim); line-height:1.5; }
@media(max-width:860px){ .method-rail{ grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .method-rail{ grid-template-columns:1fr; } .method-step{ min-height:auto; } }

/* ---------- BOOTHCRAFT (disabled placeholder, P0 — not wired) ---------- */
.bc{ position:relative; max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,64px) clamp(80px,12vh,160px); }
.bc-card{ position:relative; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:linear-gradient(135deg, var(--ink-2), var(--ink)); padding:clamp(40px,6vw,80px); }
.bc-badge{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--cyan); border:1px solid var(--cyan-dim); padding:7px 14px; border-radius:100px; margin-bottom:28px; }
.bc-badge .pulse{ width:7px; height:7px; border-radius:50%; background:var(--cyan); animation:pulse 2s infinite; }
.bc-card h3{ font-family:var(--font-display); font-weight:600; font-size:clamp(30px,4.5vw,60px); letter-spacing:-0.03em; line-height:1.02; margin-bottom:20px; max-width:16ch; }
.bc-card h3 em{ font-family:var(--font-serif); font-style:italic; color:var(--cyan); font-weight:400; }
.bc-card p{ font-size:clamp(15px,1.6vw,18px); color:var(--paper-dim); max-width:52ch; line-height:1.6; margin-bottom:32px; }
.bc-cta{ display:inline-flex; align-items:center; gap:12px; font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--ink); background:var(--paper); padding:15px 26px; border-radius:100px; text-decoration:none; cursor:not-allowed; opacity:0.55; }
.bc-wire{ position:absolute; top:0; right:0; width:45%; height:100%; opacity:0.5; pointer-events:none; }
[dir="rtl"] .bc-wire{ right:auto; left:0; transform:scaleX(-1); }
@media(max-width:760px){ .bc-wire{ display:none; } }

/* ---------- CONTACT ---------- */
.contact{ border-top:1px solid var(--line); background:var(--ink); }
.contact-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(40px,6vw,90px); max-width:var(--maxw); margin:0 auto; padding:clamp(80px,12vh,150px) clamp(20px,5vw,64px); }
.contact-l h2{ font-family:var(--font-display); font-weight:600; font-size:clamp(34px,5vw,72px); letter-spacing:-0.035em; line-height:0.98; margin-bottom:24px; }
.contact-l h2 em{ font-family:var(--font-serif); font-style:italic; color:var(--cyan); font-weight:400; }
.contact-l p{ color:var(--paper-dim); font-size:17px; line-height:1.6; max-width:42ch; margin-bottom:40px; }
.contact-facts{ display:grid; grid-template-columns:1fr 1fr; gap:24px 32px; }
.fact .lbl{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--paper-faint); margin-bottom:6px; }
.fact .val{ font-size:16px; color:var(--paper); }
.fact .val a{ color:var(--paper); text-decoration:none; border-bottom:1px solid var(--line); transition:border-color .3s; }
.fact .val a:hover{ border-color:var(--cyan); }
.form{ display:flex; flex-direction:column; gap:18px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field label{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--paper-faint); }
.field input,.field select,.field textarea{
  background:var(--ink-2); border:1px solid var(--line); border-radius:8px; padding:14px 16px;
  color:var(--paper); font-family:var(--font-body); font-size:15px; transition:border-color .3s var(--ease); width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--cyan); }
.field textarea{ resize:vertical; min-height:90px; }
.submit{ font-family:var(--font-display); font-weight:600; font-size:16px; background:var(--cyan); color:var(--ink); border:none; border-radius:100px; padding:17px; cursor:pointer; transition:all .4s var(--ease); margin-top:6px; }
.submit:hover{ background:var(--paper); transform:translateY(-2px); }
.submit:disabled{ opacity:0.6; cursor:wait; transform:none; }
.form-note{ font-size:13px; color:var(--paper-faint); margin-top:2px; }
.form-note.err{ color:oklch(0.7 0.18 25); }
.form-note.ok{ color:var(--cyan); }
@media(max-width:820px){ .contact-grid{ grid-template-columns:1fr; } }

/* ---------- FOOTER ---------- */
.footer{ border-top:1px solid var(--line); padding:clamp(40px,6vw,64px) clamp(20px,5vw,64px) 40px; max-width:var(--maxw); margin:0 auto; }
.footer-big{ font-family:var(--font-display); font-weight:700; font-size:clamp(60px,18vw,240px); line-height:0.85; letter-spacing:-0.05em; color:oklch(0.50 0.02 250); margin-bottom:40px; user-select:none; }
.footer-big span{ color:var(--cyan); }
.footer-bar{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; font-family:var(--font-mono); font-size:12px; color:var(--paper-faint); }

/* ---------- PROJECT PAGE (/work/{slug}/) ---------- */
.project-hero{ position:relative; min-height:60svh; display:flex; flex-direction:column; justify-content:flex-end; padding:120px clamp(20px,5vw,64px) 60px; overflow:hidden; }
.project-hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(0.9) brightness(0.6); }
.project-hero-veil{ position:absolute; inset:0; background:linear-gradient(180deg, oklch(0.16 0.018 250/0.5) 0%, transparent 40%, oklch(0.16 0.018 250/0.95) 100%); }
.project-hero-inner{ position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; width:100%; }
.back-link{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--paper-dim); text-decoration:none; margin-bottom:28px; }
.back-link:hover{ color:var(--cyan); }
.project-hero h1{ font-family:var(--font-display); font-weight:600; font-size:clamp(38px,7vw,90px); letter-spacing:-0.03em; line-height:0.98; margin-bottom:20px; }
.project-specs{ display:flex; flex-wrap:wrap; gap:28px 40px; }
.project-specs .spec .lbl{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--paper-faint); margin-bottom:4px; }
.project-specs .spec .val{ font-family:var(--font-display); font-size:18px; color:var(--paper); }
.project-gallery{ max-width:var(--maxw); margin:0 auto; padding:clamp(60px,8vh,100px) clamp(20px,5vw,64px); display:grid; gap:clamp(16px,2vw,24px); }
.project-gallery img{ width:100%; border-radius:8px; object-fit:cover; }
.project-cta{ text-align:center; padding:0 clamp(20px,5vw,64px) clamp(80px,10vh,120px); }
.project-cta a{ display:inline-flex; align-items:center; gap:12px; font-family:var(--font-display); font-weight:600; font-size:15px; background:var(--cyan); color:var(--ink); text-decoration:none; padding:16px 26px; border-radius:100px; }

/* ---------- ASSISTANT PLACEHOLDER (disabled — activates in P2) ---------- */
.assistant-fab{ position:fixed; bottom:24px; z-index:90; inset-inline-end:24px; display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:12px; letter-spacing:0.06em; color:var(--paper-faint); background:var(--ink-2); border:1px solid var(--line); padding:10px 16px; border-radius:100px; opacity:0.5; cursor:not-allowed; user-select:none; }
.assistant-fab .dot{ width:6px; height:6px; border-radius:50%; background:var(--paper-faint); }

/* ---------- REVEAL ON SCROLL ---------- */
.reveal{ opacity:0; transform:translateY(30px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- KEYFRAMES ---------- */
@keyframes rise{ to{ opacity:1; transform:none; } }
@keyframes reveal{ to{ transform:none; } }
@keyframes slide{ to{ transform:translateX(-50%); } }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.3; } }
@media(prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; } .reveal{ opacity:1; transform:none; } .hero h1 .line>span{ transform:none; } }