/*
Theme Name: Cafe Azul
Theme URI: https://cafeazul.co.uk
Author: Kobestarr Digital
Author URI: https://kobestarr.io
Description: Custom theme for Cafe Azul - specialty coffee by day, Spanish bar by night. Wilmslow and Poynton, Cheshire. Split-takeover hero with canvas frame scrubbing.
Version: 1.0.0
License: Proprietary
Text Domain: cafe-azul
*/

:root{
  /* palette: contrast-repaired set from the 2026-07 design pass */
  --color-primary:#2AC1DF;          /* fills, icons, dark-section accents only */
  --color-primary-strong:#117A8C;   /* text-carrying teal: links, outline buttons */
  --color-warm:#C4704B;             /* display >=24px only */
  --color-warm-text:#A85E3F;        /* terracotta for text below 24px */
  --color-dark:#2F2E2E;
  --color-bg:#FAF8F5;
  --color-bg-alt:#F3F0EB;
  --color-muted:#6E6E6D;            /* replaces #A0A09F for functional text */
  --color-success:#2E7D32;
  --color-error:#C62828;

  --font-display:"Fraunces",Georgia,serif;
  --font-body:"Work Sans",system-ui,-apple-system,sans-serif;
  --font-script:"Caveat",cursive;

  --ease-out:cubic-bezier(0.22,1,0.36,1);
  --dur-micro:120ms;
  --dur-standard:200ms;
  --dur-emphasis:320ms;

  --max-width:1200px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--color-bg)}
body{
  font-family:var(--font-body);font-weight:400;font-size:1rem;line-height:1.6;
  color:var(--color-dark);background:var(--color-bg);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
:focus-visible{outline:3px solid var(--color-primary-strong);outline-offset:3px}
a{color:var(--color-primary-strong)}
img{max-width:100%;height:auto}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--color-primary-strong);color:#fff;padding:.8rem 1.2rem;border-radius:0 0 8px 0;
}
.skip-link:focus{left:0}

/* ---------- header ---------- */
.site-header{
  position:fixed;inset:0 0 auto 0;height:72px;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(1.25rem,4vw,3rem);
  background:rgba(250,248,245,.94);
  border-bottom:1px solid rgba(47,46,46,.06);
}
.logo{display:flex;align-items:baseline;gap:.55rem;text-decoration:none}
.logo-name{font-family:var(--font-display);font-optical-sizing:auto;font-weight:620;font-size:1.5rem;color:var(--color-warm-text)}
.logo-est{font-family:var(--font-script);font-weight:600;font-size:1.05rem;color:var(--color-primary-strong);transform:rotate(-4deg)}
.nav{display:flex;gap:1.75rem;align-items:center}
.nav a{font-size:.85rem;font-weight:500;letter-spacing:.03em;color:var(--color-dark);text-decoration:none;padding:.75rem .15rem;position:relative}
.nav a::after{content:'';position:absolute;left:0;bottom:8px;height:2px;width:100%;background:var(--color-primary);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-standard) var(--ease-out)}
.nav a:hover::after{transform:scaleX(1)}
.nav-call{font-weight:600;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--color-dark)!important;background:var(--color-primary);border-radius:8px;padding:.7rem 1.1rem}
@media(max-width:860px){.nav{display:none}}

/* ---------- hero: split takeover ---------- */
.stage{height:300vh;position:relative}
.hero{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--color-bg);contain:layout paint}
.hero-motion{position:absolute;inset:0;will-change:transform}
.panel-window{position:absolute;inset:0;overflow:hidden;will-change:transform;transform:translateX(50vw)}
.panel-inner{position:absolute;inset:0;will-change:transform;transform:translateX(-50vw)}
.pour{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}
.pour-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pour-loading{
  position:absolute;right:1.2rem;bottom:1.2rem;z-index:3;
  font-family:var(--font-script);font-weight:600;font-size:1.4rem;color:rgba(255,244,234,.95);
  background:rgba(22,14,8,.45);padding:.35rem .9rem;border-radius:8px;transform:rotate(-2deg);
  transition:opacity .4s ease-out;
}
.pour-loading.gone{opacity:0}
.panel-edge{
  position:absolute;top:0;bottom:0;left:-1.5px;width:3.5px;
  background:rgba(42,193,223,.85);
  box-shadow:-28px 0 36px -10px rgba(22,14,8,.28);
  will-change:opacity;
}
.panel-scrim{
  position:absolute;inset:0;opacity:0;will-change:opacity;pointer-events:none;
  background:linear-gradient(72deg,rgba(22,14,8,.8) 0%,rgba(22,14,8,.5) 40%,rgba(22,14,8,.08) 70%);
}
.takeover-line{position:absolute;left:clamp(1.5rem,5vw,4.5rem);bottom:clamp(2.5rem,10vh,6rem);z-index:3;max-width:600px}
.takeover-line .kicker{
  font-family:var(--font-script);font-weight:600;font-size:clamp(1.5rem,2vw,1.8rem);
  color:#7ADDF0;transform:rotate(-2deg);display:inline-block;margin-bottom:.4rem;
  opacity:0;will-change:opacity,transform;
}
.takeover-line .reward{
  font-family:var(--font-display);font-optical-sizing:auto;font-weight:600;
  font-size:clamp(1.9rem,3.4vw,3rem);line-height:1.1;letter-spacing:-.005em;color:#FFF4EA;
  opacity:0;will-change:opacity,transform;
}
.copy{position:absolute;top:50%;left:0;transform:translateY(-50%);width:50%;padding:0 clamp(1.5rem,4.5vw,4rem);z-index:2}
.tier{will-change:opacity,transform}
.open-pill{
  display:inline-flex;align-items:center;gap:.5rem;font-size:.78rem;font-weight:600;letter-spacing:.04em;
  color:#1E5A2C;background:rgba(46,125,50,.1);border:1px solid rgba(46,125,50,.25);
  border-radius:9999px;padding:.4rem .9rem;margin-bottom:1.4rem;
}
.open-dot{width:8px;height:8px;border-radius:50%;background:var(--color-success)}
.hero h1{
  font-family:var(--font-display);font-optical-sizing:auto;font-weight:620;
  font-size:clamp(2.2rem,3.5vw,3.3rem);line-height:1.08;letter-spacing:-.015em;
  color:var(--color-warm-text);text-wrap:balance;margin-bottom:1.2rem;
}
.hero h1 em{font-style:italic;color:var(--color-primary-strong)}
.hero-sub{font-size:clamp(1rem,1.25vw,1.1rem);max-width:46ch;margin-bottom:1.9rem}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.9rem;margin-bottom:.7rem}
.btn{
  font-family:var(--font-body);font-weight:600;font-size:1rem;letter-spacing:.01em;text-decoration:none;
  border-radius:8px;padding:.95rem 1.9rem;min-height:52px;display:inline-flex;align-items:center;justify-content:center;
  border:2px solid var(--color-primary);background:var(--color-primary);color:var(--color-dark);
  transition:transform var(--dur-standard) var(--ease-out),box-shadow var(--dur-standard) var(--ease-out);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(42,193,223,.35)}
.cta-note{font-size:.85rem;color:var(--color-muted);margin-bottom:1.4rem}
.proof{display:flex;align-items:center;gap:.55rem;font-size:.88rem;color:var(--color-muted)}
.proof strong{color:var(--color-dark);font-weight:600}
.star{color:var(--color-warm)}

.rise{opacity:0;animation:rise .7s var(--ease-out) forwards}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.rise:nth-child(1){animation-delay:.15s}.rise:nth-child(2){animation-delay:.28s}
.rise:nth-child(3){animation-delay:.4s}.rise:nth-child(4){animation-delay:.5s}
.rise:nth-child(5){animation-delay:.58s}.rise:nth-child(6){animation-delay:.66s}

/* ---------- sections ---------- */
.section{max-width:var(--max-width);margin:0 auto;padding:5.5rem clamp(1.25rem,4vw,3rem)}
.section--center{text-align:center}
.section h2{
  font-family:var(--font-display);font-optical-sizing:auto;font-weight:600;
  color:var(--color-warm-text);font-size:clamp(2rem,3.6vw,2.9rem);margin-bottom:1rem;
}
.section p{max-width:52ch}
.section--center p{margin:0 auto}
.reward-static{display:none;background:var(--color-bg);max-width:var(--max-width);margin:0 auto;padding:3rem clamp(1.25rem,4vw,3rem)}
.reward-static .kicker{font-family:var(--font-script);font-weight:600;font-size:1.6rem;color:var(--color-primary-strong)}
.reward-static h2{font-family:var(--font-display);font-weight:600;color:var(--color-warm-text);font-size:clamp(1.7rem,3vw,2.4rem)}

/* ---------- footer ---------- */
.site-footer{background:var(--color-dark);color:#FAF8F5;padding:3.5rem clamp(1.25rem,4vw,3rem) 2rem;margin-top:4rem}
.footer-inner{max-width:var(--max-width);margin:0 auto;display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between}
.footer-inner a{color:#7ADDF0;text-decoration:none}
.footer-credit{margin-top:2rem;text-align:center;font-size:.85rem;color:#C5C5C4}
.footer-credit a{color:var(--color-primary)}

/* ---------- mobile hero: rising band ---------- */
@media(max-width:860px){
  .stage{height:auto}
  .hero{position:relative;height:auto;overflow:visible;contain:none;display:flex;flex-direction:column}
  .copy{order:1;position:relative;top:auto;left:auto;transform:none;width:100%;padding:6.5rem 1.5rem 2.5rem;text-align:center}
  .open-pill{margin-left:auto;margin-right:auto}
  .hero-sub{margin-left:auto;margin-right:auto}
  .hero-ctas{justify-content:center}
  .proof{justify-content:center}
  .hero-motion{position:relative;inset:auto;order:2}
  .panel-window{position:relative;inset:auto;transform:none;height:72svh;overflow:hidden}
  .panel-inner{position:absolute;inset:auto;transform:none;top:-6%;left:0;right:0;height:112%}
  .pour,.pour-poster{position:absolute;inset:0}
  .panel-edge{display:none}
  .panel-scrim{opacity:.95}
  .takeover-line{left:1.5rem;bottom:2rem;right:1.5rem}
}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .rise{animation:none;opacity:1;transform:none}
  .stage{height:auto}
  .hero{position:relative}
  .takeover-line{display:none}
  .reward-static{display:block}
}