/* Café Arwa — coming-soon home page (index.html, de/index.html) only.
   Temporary: when the full site opens, rename home-full.html back to index.html
   (and de/home-full.html) and delete this file. Builds on style.css tokens. */

html.cs{background:var(--olive-deep);}
.cs-bar{position:absolute; top:0; left:0; right:0; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px var(--pad); max-width:var(--maxw); margin:0 auto;}
.cs-bar .brand{color:var(--cream);}
.cs-bar .brand em{color:var(--amber);}
.cs-bar .brand::before{filter:brightness(0) invert(1) sepia(0.3) saturate(2) hue-rotate(-10deg);}
.cs-lang{font-size:0.8rem; font-weight:700; letter-spacing:0.08em; padding:10px 16px; min-height:44px; display:inline-flex; align-items:center; color:var(--cream); border:1.5px solid rgba(244,234,214,0.45); border-radius:999px; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); background:rgba(26,26,12,0.25);}
.cs-lang:hover{background:var(--cream); color:var(--olive-deep);}

/* hero: the farmer, full bleed */
.cs-hero{position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:flex-end; color:var(--cream); background:var(--olive-deep); overflow:hidden; isolation:isolate; padding:120px 0 clamp(40px,7vw,80px);}
.cs-photo{position:absolute; inset:0; z-index:-2;}
.cs-photo picture{display:block; height:100%;}
.cs-photo img{width:100%; height:100%; object-fit:cover; object-position:50% 42%;}
.cs-hero::before{content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(26,26,12,0.55) 0%, rgba(26,26,12,0.05) 26%, rgba(26,26,12,0.64) 58%, rgba(26,26,12,0.93) 100%);}
.cs-arabic{position:absolute; left:clamp(8px,4vw,60px); bottom:-0.2em; font-family:'Aref Ruqaa Arwa','Aref Ruqaa',serif; font-weight:700; line-height:1; font-size:clamp(8rem,22vw,15rem); color:rgba(226,162,74,0.12); pointer-events:none; user-select:none; direction:rtl;}
.cs-arabic::before{content:'أروى';}
.cs-trade{overflow:hidden;}
.cs-trade .wrap{position:relative;}
.cs-copy{max-width:760px;}
.cs-hero .eyebrow{background:rgba(26,26,12,0.55); color:var(--amber-soft); border:1px solid rgba(226,162,74,0.45); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);}
.cs-hero h1{font-weight:700; font-size:clamp(2.8rem,11vw,6.2rem); line-height:0.98; letter-spacing:-0.035em; color:var(--cream);}
.cs-hero h1 .is{color:var(--amber);}
.cs-tagline{margin-top:20px; font-weight:600; font-size:clamp(1.1rem,3.2vw,1.55rem); color:var(--cream); letter-spacing:-0.01em; max-width:30ch;}
.cs-ctas{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px;}
.cs-hero .btn.primary{background:var(--amber); border-color:var(--amber); color:var(--ink);}
.cs-hero .btn.primary:hover{background:var(--amber-deep); border-color:var(--amber-deep); box-shadow:0 8px 24px rgba(0,0,0,0.35);}
.cs-hero .btn.ghost{color:var(--cream); border-color:rgba(244,234,214,0.6); background:rgba(26,26,12,0.25);}
.cs-hero .btn.ghost:hover{background:var(--cream); color:var(--olive-deep);}
.cs-cue{position:absolute; left:50%; bottom:16px; width:2px; height:34px; background:linear-gradient(var(--amber),transparent); transform:translateX(-50%); animation:cs-cue 2.2s ease-in-out infinite;}
.cs-rise > *{animation:cs-rise .6s cubic-bezier(.2,.7,.2,1) both;}
.cs-rise > *:nth-child(1){animation-delay:0s;} .cs-rise > *:nth-child(2){animation-delay:.08s;} .cs-rise > *:nth-child(3){animation-delay:.16s;} .cs-rise > *:nth-child(4){animation-delay:.24s;} .cs-rise > *:nth-child(5){animation-delay:.3s;}
@keyframes cs-rise{from{opacity:0; transform:translateY(28px);}to{opacity:1; transform:none;}}
@keyframes cs-fade{from{opacity:0;}to{opacity:1;}}
@keyframes cs-cue{0%,100%{opacity:.2; transform:translateX(-50%) translateY(-6px);}50%{opacity:1; transform:translateX(-50%) translateY(4px);}}

/* story */
.cs-story{background:var(--cream); padding:clamp(56px,9vw,120px) 0;}
.cs-story-grid{display:grid; gap:clamp(32px,6vw,80px); align-items:center;}
.cs-lead{font-weight:700; font-size:clamp(1.9rem,6vw,3.4rem); line-height:1.06; letter-spacing:-0.03em; color:var(--ink);}
.cs-lead em{font-style:normal; color:var(--terracotta);}
.cs-steps{list-style:none; margin-top:clamp(28px,5vw,48px); display:grid; gap:0; counter-reset:step;}
.cs-steps li{display:grid; grid-template-columns:auto 1fr; gap:6px 20px; padding:22px 0; border-top:1px solid var(--line);}
.cs-steps li:last-child{border-bottom:1px solid var(--line);}
.cs-steps .n{grid-row:span 2; font-weight:700; font-size:2.2rem; line-height:1; color:var(--amber-deep); min-width:2ch;}
.cs-steps h3{font-size:1.2rem; font-weight:700; letter-spacing:-0.01em; color:var(--olive-deep);}
.cs-steps p{color:var(--muted); max-width:44ch;}
.cs-arch{max-width:360px; width:100%; margin:0 auto; aspect-ratio:3/4; box-shadow:0 14px 34px rgba(74,52,24,0.20);}
.cs-arch img{object-position:50% 30%;}

/* trade band */
.cs-trade{background:var(--olive-deep); color:var(--cream); padding:clamp(48px,8vw,96px) 0; text-align:center; position:relative;}
.cs-trade .cs-eyebrow{color:var(--amber); margin-bottom:12px;}
.cs-trade h2{font-size:clamp(1.8rem,5vw,3.2rem); line-height:1.08; letter-spacing:-0.025em; color:var(--cream);}
.cs-trade p{margin:14px auto 0; max-width:44ch; color:rgba(244,234,214,0.9);}
.cs-trade .btn{margin-top:24px; border-color:var(--amber); background:var(--amber); color:var(--ink);}
.cs-trade .btn:hover{background:var(--amber-deep); border-color:var(--amber-deep);}

.cs-contact{padding:clamp(48px,7vw,80px) 0;}
.cs-contact .visit-grid{margin-top:28px;}
.cs-contact .visit-card .value{overflow-wrap:anywhere;}
.cs-foot{padding-bottom:30px;}

/* scroll reveal (only when JS is on) */
html.js .cs-reveal{opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1);}
html.js .cs-reveal.in{opacity:1; transform:none;}

@media (min-width:860px){
  .cs-hero{padding-top:140px;}
  .cs-story-grid{grid-template-columns:1.3fr 1fr;}
  .cs-photo img{object-position:50% 48%;}
}
@media (prefers-reduced-motion:reduce){
  .cs-photo img,.cs-rise > *,.cs-cue{animation:none !important;}
  html.js .cs-reveal{opacity:1; transform:none; transition:none;}
}
.cs-trade-lead{font-size:clamp(1.05rem,2.4vw,1.25rem); max-width:40ch !important;}
.cs-trade-cta{font-weight:700; font-size:clamp(1.15rem,3vw,1.5rem); color:var(--amber) !important; margin-top:22px !important;}
.cs-ctas-center{justify-content:center;}
.cs-trade .btn.ghost{background:none; color:var(--cream); border-color:rgba(244,234,214,0.6);}
.cs-trade .btn.ghost:hover{background:var(--cream); color:var(--olive-deep);}
.cs-trade-mail{font-size:0.95rem;}
.cs-trade-mail a{text-decoration:underline; text-underline-offset:3px;}
.cs-trade .cs-ctas{margin-top:20px;} .cs-trade .cs-ctas .btn{margin-top:0;}
.cs-hero :focus-visible,.cs-bar :focus-visible,.cs-trade :focus-visible{outline-color:var(--amber);}
.cs-trade-mail a,.notify .form-consent a{display:inline-block; padding:10px 4px;}

/* hero v2: phones show the photo on top and the text below it; wide screens put the text on the right */
@media (max-width:959px){
  .cs-hero{display:block; min-height:0; padding:0;}
  .cs-hero::before{display:none;}
  .cs-photo{position:relative; inset:auto; z-index:0; height:78vh; height:78svh; min-height:480px; max-height:720px;}
  .cs-photo::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(26,26,12,0.6) 0%, rgba(26,26,12,0) 24%, rgba(26,26,12,0) 70%, var(--olive-deep) 100%);}
  .cs-photo img{object-position:88% 40%;}
  .cs-copy{position:relative; z-index:1; margin-top:-56px; padding-bottom:clamp(44px,9vw,72px);}
  .cs-cue{display:none;}
}
@media (min-width:960px){
  .cs-hero{align-items:center;}
  .cs-hero::before{background:linear-gradient(90deg, rgba(26,26,12,0.9) 0%, rgba(26,26,12,0.66) 40%, rgba(26,26,12,0) 70%), linear-gradient(180deg, rgba(26,26,12,0.5) 0%, rgba(26,26,12,0) 22%, rgba(26,26,12,0.45) 100%);}
  .cs-hero > .wrap{display:flex; justify-content:flex-start; width:100%;}
  .cs-copy{max-width:520px;}
  .cs-hero h1{font-size:clamp(2.8rem,4.6vw,4.4rem);}
  .cs-photo img{object-position:70% 50%;}
}

/* "Coming soon" badge: the word changes slowly between German, English and Arabic, and a branch of three cherries ripens as it does */
.cs-soon{display:inline-flex; align-items:center; gap:10px; margin:18px 0 14px; padding:8px 16px; border-radius:999px; background:var(--amber); color:#1a1a0c; font-weight:800; font-size:.9rem; letter-spacing:.12em; text-transform:uppercase;}
.cs-soon-text{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.cs-cycle{display:inline-flex; align-items:center; gap:.4em;}
.cs-cycle-words{display:inline-grid; text-align:center; min-width:3.4em;}
.cs-cycle-words span{grid-area:1/1; opacity:0; animation:cs-word 9s ease-in-out infinite;}
.cs-cycle-words span:nth-child(2){animation-delay:3s;}
.cs-cycle-words span:nth-child(3){animation-delay:6s; letter-spacing:0; font-size:1.3em; line-height:1; padding-top:2px;}
@keyframes cs-word{0%{opacity:0; transform:translateY(5px);} 6%,28%{opacity:1; transform:none;} 34%,100%{opacity:0; transform:translateY(-5px);}}
.cs-branch{width:42px; height:22px; flex:none;}
.cs-branch .br{fill:#5c8a3a; animation:cs-br 9s ease-in-out infinite;}
.cs-branch .br2{animation-delay:3s;} .cs-branch .br3{animation-delay:6s;}
@keyframes cs-br{0%,4%{fill:#5c8a3a;} 20%,100%{fill:#b3261e;}}
@media (prefers-reduced-motion:reduce){
  .cs-cycle-words span{animation:none;}
  .cs-cycle-words span:first-child{opacity:1;}
  .cs-branch .br{animation:none; fill:#b3261e;}
}

/* trade band photo (man with cherries) */
.cs-trade-photo{max-width:760px; margin:0 auto clamp(28px,5vw,44px); border-radius:22px; overflow:hidden; box-shadow:0 14px 34px rgba(0,0,0,0.35); aspect-ratio:4/3;}
.cs-trade-photo img{width:100%; height:100%; object-fit:cover; object-position:30% 30%; display:block;}
@media (min-width:800px){.cs-trade-photo{aspect-ratio:16/9;} .cs-trade-photo img{object-position:30% 35%;}}
@media (max-width:600px){.cs-photo img{object-position:50% 40%;}}

/* Café section (what the place is) and quieter trade band */
.cs-cafe{background:var(--bg); padding:clamp(56px,9vw,110px) 0;}
.cs-cafe-intro{margin-top:18px; max-width:46ch; font-size:clamp(1.05rem,2.4vw,1.25rem); color:var(--muted);}
.cs-cafe-grid{display:grid; gap:16px; margin-top:clamp(28px,5vw,44px);}
.cs-cafe-card{background:var(--cream); border:1px solid var(--line); border-radius:var(--radius); padding:24px 26px;}
.cs-cafe-card h3{font-size:1.2rem; font-weight:700; letter-spacing:-0.01em; color:var(--olive-deep);}
.cs-cafe-card p{margin-top:8px; color:var(--muted);}
.cs-cafe-note{margin-top:22px; font-weight:600; color:var(--terracotta);}
.cs-pull{margin-top:28px; font-weight:600; font-size:1.1rem; color:var(--olive-deep); max-width:32ch;}
.cs-trade{padding:clamp(40px,6vw,72px) 0;}
.cs-trade h2{font-size:clamp(1.5rem,4vw,2.3rem);}
.cs-trade-photo{max-width:560px;}
@media (min-width:760px){.cs-cafe-grid{grid-template-columns:repeat(3,1fr);}}