/* ============================================================
   TOUT VA BIEN — STYLES
   ============================================================ */

/* ── FONTS ── */
@font-face {
  font-family: "QUARTZ";
  src: url("fonts/QUARTZ.ttf") format("truetype");
  font-weight: normal;
  font-style:  normal;
  font-display: swap;
}

@font-face {
  font-family: "Teriyake";
  src: url("fonts/Teriyake-Thin.otf") format("opentype");
  font-weight: 100;
  font-style:  normal;
  font-display: swap;
}

@font-face {
  font-family: "Teriyake";
  src: url("fonts/Teriyake-ExtraLight.otf") format("opentype");
  font-weight: 200;
  font-style:  normal;
  font-display: swap;
}

@font-face {
  font-family: "Teriyake";
  src: url("fonts/Teriyake-Light.otf") format("opentype");
  font-weight: 300;
  font-style:  normal;
  font-display: swap;
}

@font-face {
  font-family: "Teriyake";
  src: url("fonts/Teriyake-Regular.otf") format("opentype");
  font-weight: 400;
  font-style:  normal;
  font-display: swap;
}

@font-face {
  font-family: "Teriyake";
  src: url("fonts/Teriyake-Medium.otf") format("opentype");
  font-weight: 500;
  font-style:  normal;
  font-display: swap;
}

@font-face {
  font-family: "Teriyake";
  src: url("fonts/Teriyake-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style:  normal;
  font-display: swap;
}

@font-face {
  font-family: "Teriyake";
  src: url("fonts/Teriyake-Bold.otf") format("opentype");
  font-weight: 700;
  font-style:  normal;
  font-display: swap;
}

@font-face {
  font-family: "Teriyake";
  src: url("fonts/Teriyake-Black.otf") format("opentype");
  font-weight: 900;
  font-style:  normal;
  font-display: swap;
}

/* ── CUSTOM PROPERTIES ── */
:root {
  --bg:        #2b2b2b;
  --text:      #fefffe;
  --text-dark: #2b2b2b;
  --nav-h:     70px;

  --font-display: "QUARTZ", Georgia, serif;
  --font-body:    "Teriyake", sans-serif;

  /* Panel widths */
  --panel-hero:      80vw;
  --panel-menu:      95vw;
  --panel-specialty: 50vw;
  --panel-about:     110vw;
}

/* ── RESET & BASE ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
}

ul { list-style: none; }
a  { color: inherit; text-decoration: none; }
img { display: block; }

/* ── SITE WRAPPER — single fixed layer so blend mode works ── */
#site-wrapper {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

/* ── SCROLL CONTAINER ── */
.scroll-container {
  position: absolute;
  inset: 0;
  overflow-x: scroll;
  overflow-y: hidden;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.scroll-container::-webkit-scrollbar { display: none; }
.scroll-container.dragging { cursor: grabbing; }

/* ── NAV (after main in DOM — paints on top naturally) ── */
#nav {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 40px 14px;
  background: transparent;
  pointer-events: none;
}

#nav a { pointer-events: all; }

.nav-logo {
  mix-blend-mode: difference;
}

.nav-logo img {
  height: 38px;
  width: auto;
  display: block;
}

.nav-links {
  display: flex;
  gap: 56px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: #ffffff;
  mix-blend-mode: difference;
}

.nav-links li a {
  cursor: pointer;
}
.nav-links li a:hover { opacity: 0.8; }

/* ── CANVAS ── */
.canvas {
  display: flex;
  height: 100%;
  width: calc(var(--panel-hero) + var(--panel-menu) + var(--panel-specialty) + var(--panel-about));
}

/* ── PANELS (shared) ── */
.panel {
  position: relative;
  height: 100%;
  flex-shrink: 0;
  overflow: hidden;
}

/* ══════════════════════════════════
   PANEL 1 — HERO
══════════════════════════════════ */
.panel--hero {
  width: var(--panel-hero);
  display: flex;
  align-items: center;
}

.hero-text {
  position: absolute;
  left: 40px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 65vw;
}

.hero-heading {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(44px, 5vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--text);
  white-space: pre-line;
}

.hero-whats-new {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 400px;
}

.sub-head {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  color: var(--text);
}

.body-text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
}

/* Social icons — bottom-right of hero */
.social-icons {
  position: absolute;
  bottom: 32px;
  right: 40px;
  display: flex;
  gap: 8px;
  pointer-events: none;
  z-index: 10;
  mix-blend-mode: difference;
}
.social-icons a { pointer-events: all; }

.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 1.2px solid rgba(254,255,254,0.7);
  border-radius: 50%;
  color: var(--text);
  transition: border-color 0.2s, opacity 0.2s;
}
.social-btn:hover { border-color: var(--text); opacity: 0.8; }
.social-btn svg { width: 22px; height: 22px; }

/* ══════════════════════════════════
   PANEL 2 — MENU
══════════════════════════════════ */
.panel--menu {
  width: var(--panel-menu);
  display: flex;
  align-items: flex-start;
  padding-top: 60px;
}

/* Large display word "Coffee" */
.menu-large-word {
  position: absolute;
  top: 40px;
  left: 144px;
  transform: none;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(120px, 16vw, 220px);
  letter-spacing: -0.02em;
  line-height: 0.92;
  color: var(--text);
  pointer-events: none;
  white-space: nowrap;
  opacity: 0.9;
  z-index: 3;
}

/* Menu columns layout */
.menu-col {
  position: absolute;
  top: calc(var(--nav-h) + 8px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  color: var(--text);
  z-index: 2;
}

.menu-col--coffee { left: 40px;   width: 300px; }
.menu-col--tea    { left: 380px;  width: 320px; }
.menu-col--jpn    { left: 730px;  width: 320px; }
.menu-col--drinks { left: 380px; top: 585px; width: 320px; }

.menu-heading {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 28px;
  line-height: 1;
  color: var(--text);
}

.menu-list {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.9;
  color: var(--text);
}
.menu-list li::before { content: "  — "; }

.menu-subgroup {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.menu-label-bold {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.9;
  color: var(--text);
}

/* Coffee pour image */
.menu-coffee-image {
  position: absolute;
  top: 410px;
  bottom: 0;
  left: 732px;
  width: 380px;
  overflow: visible;
}
.menu-coffee-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* ══════════════════════════════════
   PANEL 3 — SPECIALTY & DRINKS
══════════════════════════════════ */
.panel--specialty {
  width: var(--panel-specialty);
  position: relative;
}

/* Coffee of the Day card */
.specialty-card {
  position: absolute;
  left: 40px;
  bottom: 60px;
  top: auto;
  transform: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 200px;
  color: var(--text);
}

.specialty-card__img {
  width: 160px;
  height: 210px;
  object-fit: contain;
  object-position: bottom center;
}

/* Bensa block */
.bensa-block {
  position: absolute;
  left: 270px;
  top: auto;
  bottom: 0;
  transform: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--text);
  width: 420px;
}

.bensa-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bensa-img {
  width: 100%;
  height: 72vh;
  object-fit: contain;
  object-position: bottom center;
}

/* Iced drinks + Lemonades */
.drinks-col {
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--text);
}

.drinks-col--lemonades { left: 1080px; top: calc(var(--nav-h) + 8px); transform: none; width: 320px; }
.drinks-col--iced      { left: 40px; top: 589px; transform: none; width: 300px; }

/* Café images */
.cafe-image {
  position: absolute;
  overflow: hidden;
}

.cafe-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cafe-image--main {
  right: 0;
  top: 0;
  width: 65%;
  height: 100%;
}

.cafe-image--secondary {
  left: 280px;
  bottom: 0;
  width: 180px;
  height: 46%;
}

/* ══════════════════════════════════
   PANEL 4 — ABOUT US
══════════════════════════════════ */
.panel--about {
  width: var(--panel-about);
  background: #fefffe;
  position: relative;
}

/* Café image bleeds in from the left (mirrors panel 3's right edge) */
.panel--about::before {
  content: '';
  position: absolute;
  left: 140px;
  bottom: 0;
  top: auto;
  width: 38%;
  height: 70%;
  background: url('images/cafe-interior.png') center / cover no-repeat;
  z-index: 0;
}

/* Ensure all about panel content sits above the bleed image */
.about-rotated-wrap,
.about-images,
.about-body {
  z-index: 1;
}

/* Rotated "About us" text on left edge */
.about-rotated-wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 120px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.about-rotated-text {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(100px, 12vw, 160px);
  letter-spacing: -0.05em;
  line-height: 0.92;
  color: var(--text-dark);
  white-space: nowrap;
  transform: rotate(-90deg);
  transform-origin: center center;
}

/* Images */
.about-images {
  position: absolute;
  left: calc(140px + 27%);
  top: 0;
  width: calc(100% - 300px);
  height: 72%;
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.about-img {
  object-fit: cover;
  flex-shrink: 0;
}

/* Order: Book-Fan → white-coffee (tall) → Cafe-Order-Desk */
.about-img--1 { order: 3; width: 22%; height: 85%; }
.about-img--2 { display: none; }
.about-img--3 { order: 1; width: 22%; height: 72%; }

/* Body text */
.about-body {
  display: none;
}
.about-body .sub-head  { color: var(--text-dark); }
.about-body .body-text { color: var(--text-dark); font-size: 13px; line-height: 2.4; }

/* ── SPIN CIRCLE ── */
.spin-circle {
  position: absolute;
  bottom: 28px;
  left: 40px;
  width: 80px;
  height: 80px;
  z-index: 50;
  pointer-events: none;
  will-change: transform;
}

.spin-circle img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
}


/* ── SELECTION ── */
::selection { background: rgba(254,255,254,0.2); }

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  .spin-circle { transition: none; }
  * { transition-duration: 0.01ms !important; }
}