/* ==========================================================================
   Tôt le Matin Boulangerie — styles.css
   ========================================================================== */

:root {
  --color-bg: #ffffff;
  --color-ink: #2a2420;
  --color-muted: #746b62;
  --color-yellow: #f4c430;
  --color-yellow-deep: #e8b41c;
  --color-footer: #333f4e;
  --color-footer-ink: #f2efe9;
  --color-border: #e7e1d8;

  --font-en: 'Cormorant Garamond', 'EB Garamond', serif;
  --font-jp-heading: 'Zen Old Mincho', 'Cormorant Garamond', serif;
  --font-jp-body: 'Zen Kaku Gothic New', 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;

  --header-height: 84px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-jp-body);
  font-weight: 400;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Logo mark (real brand SVGs) ---------- */

.header-logo-mark {
  display: block;
  height: 40px;
  width: auto;
}

/* Two logo lockups: the wide horizontal one (mark + full wordmark) on
   desktop, and a more compact mark-over-katakana one on narrow screens
   so the header logo doesn't crowd out the menu. Swapped at the same
   560px breakpoint used elsewhere for mobile layout. */
.header-logo-mark--compact {
  display: none;
}

.footer-logo-mark {
  display: block;
  width: 102px;
  height: auto;
}

.site-footer__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.footer-logo-link {
  position: relative;
  display: block;
}

.footer-logo-mark--hover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity .25s ease;
}

.footer-logo-link:hover .footer-logo-mark--hover,
.footer-logo-link:focus-visible .footer-logo-mark--hover {
  opacity: 1;
}

/* Hero logo intro, in three stages once #hero-logo gets .is-visible:
     1. the M mark fades in
     2. the sun rises up from behind it
     3. the wordmark below fades in
   Single combined mark (icon + wordmark) matching the client-supplied
   final artwork 1:1. */
.hero-logo-mark { display: block; width: 200px; height: auto; overflow: visible; }

.hero-logo-mark__m-fade {
  opacity: 0;
  transition: opacity .7s ease-out;
}

#hero-logo.is-visible .hero-logo-mark__m-fade {
  opacity: 1;
}

.hero-logo-mark__sun-rise {
  /* Starts fully below the ridge clip (hidden), rises up and crests through it,
     once the M has finished fading in. */
  transform: translateY(95px);
  opacity: 0;
  transition: transform 2.3s cubic-bezier(.22,.9,.32,1) .9s, opacity .6s ease-out .9s;
}

#hero-logo.is-visible .hero-logo-mark__sun-rise {
  transform: translateY(0);
  opacity: 1;
}

.hero-logo-mark__wordmark-fade {
  /* Fades in alongside the sun's rise, so both finish settling together
     (.9s delay + 2.3s = 3.2s, matching .hero-logo-mark__sun-rise). */
  opacity: 0;
  transition: opacity 2.3s ease-out .9s;
}

#hero-logo.is-visible .hero-logo-mark__wordmark-fade {
  opacity: 1;
}

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(20px, 5vw, 56px);
  background: #9da1a4;
  border-bottom: 1px solid transparent;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: background .3s ease, backdrop-filter .3s ease, border-color .3s ease, box-shadow .3s ease, opacity .7s ease, transform .7s ease;
}

/* Revealed once the hero logo animation has settled - see script.js */
.site-header.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.site-header.is-scrolled {
  box-shadow: 0 4px 18px rgba(30, 24, 18, 0.05);
}

/* Scrolling down hides the header (fades + lifts slightly out of view);
   scrolling back up clears this class so it fades back in. See script.js
   for the scroll-direction logic that toggles this. Takes priority over
   .is-visible whenever both are present. */
.site-header.is-hidden {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}

.header-logo {
  display: flex;
  align-items: center;
}

.header-icons {
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 26px);
  color: #33414F;
}

.header-icons a {
  display: flex;
}

/* Scoped to real pointer devices (mouse/trackpad) only - on touch
   devices, tapping the hamburger button can leave the finger resting
   over the icon that appears right underneath it (usually the mail
   icon, closest to the button), and some mobile browsers then
   synthesize a :hover on it, causing an unwanted little jump. The
   transition itself is scoped here too, so touch devices have no
   opacity/transform transition on the icon links at all - nothing
   left that could misfire into a jerky animation on repeat taps. */
@media (hover: hover) and (pointer: fine) {
  .header-icons a {
    transition: color .2s ease, transform .2s ease;
  }

  .header-icons a:hover {
    color: #ffde1d;
    transform: translateY(-1px);
  }
}

.header-menu {
  position: relative;
  display: flex;
  align-items: center;
}

.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.menu-toggle__bar {
  display: block;
  width: 22px;
  height: 2px;
  background: #33414F;
  border-radius: 2px;
  transition: transform .3s ease, opacity .3s ease;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) {
  opacity: 0;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh; /* true fullscreen on mobile - excludes the browser's UI chrome */
  height: calc(var(--vh, 1vh) * 100); /* JS-locked (script.js) - stays fixed while the mobile address bar collapses/expands on scroll, instead of jumping */
  overflow: hidden;
}

.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__overlay {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  filter: drop-shadow(0 2px 14px rgba(0,0,0,.25));
}

/* ---------- Reveal-on-scroll ---------- */

.reveal,
.repeat-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s ease, transform .9s ease;
}

.reveal.is-visible,
.repeat-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Tagline ---------- */

.tagline {
  padding: clamp(72px, 12vw, 128px) 24px clamp(48px, 8vw, 96px);
  text-align: center;
}

.tagline__heading {
  font-family: "zen-kaku-gothic-new", "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: clamp(24px, 3.6vw, 34px);
  letter-spacing: .06em;
  margin: 0 0 clamp(40px, 6vw, 72px);
}

/* Each character rises up like a wisp of steam off warm bread - a soft
   blur that clears while it drifts upward into place. script.js splits
   the heading into one .char-rise span per character and gives each a
   random transition-delay, so they don't appear in reading order.
   Triggered together with the rest of .tagline via .is-visible. */
.tagline__heading .char-rise {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.55em);
  filter: blur(6px);
  transition: opacity .6s ease-out, transform .6s ease-out, filter .6s ease-out;
}

.tagline.is-visible .tagline__heading .char-rise {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.tagline__illustration {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 0 auto;
}

.tagline__body {
  max-width: 640px;
  margin: clamp(40px, 6vw, 64px) auto 0;
  text-align: left;
  font-size: 18px;
  line-height: 2;
  font-weight: 700;
  color: var(--color-ink);
  font-family: "fot-tsukuardgothic-std", var(--font-jp-body);
  /* Waits for the heading's character-by-character rise to finish, then
     fades in on its own. The actual delay is set inline by script.js
     (it depends on how many characters are in the heading). */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .8s ease-out, transform .8s ease-out;
}

.tagline.is-visible .tagline__body {
  opacity: 1;
  transform: translateY(0);
}

.tagline__body p {
  margin: 0 0 1.4em;
  text-indent: 1em;
}

.tagline__body p:last-child {
  margin-bottom: 0;
}

/* ---------- Media coverage (press / TV mentions) ---------- */
/* Text-based on purpose (no outlet/broadcaster logos - see discussion:
   those are usually trademarked, safer to just name-drop them in text).
   The list items below are placeholder copy for a design review - swap
   in the real outlet name / date / description once that's decided. */

.media {
  padding: clamp(24px, 6vw, 56px) 24px clamp(56px, 8vw, 96px);
  text-align: center;
}

.media__heading {
  display: flex;
  justify-content: center;
  color: #33414F;
  margin: 0 0 10px;
}

.media__lead {
  color: #33414F;
  font-size: 14px;
  font-family: "fot-tsukuardgothic-std", var(--font-jp-body);
  font-weight: 700;
  margin: 0 0 32px;
}

.media-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 640px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.media-list__item {
  border-top: 2.5px solid #ffde1d;
  padding-top: 20px;
}

.media-list__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 6px;
}

.media-list__outlet {
  font-weight: 700;
  color: #33414F;
  font-size: 14px;
}

.media-list__date {
  color: #9da1a4;
  font-size: 12px;
  letter-spacing: .05em;
}

.media-list__desc {
  margin: 0 0 8px;
  color: var(--color-ink);
  font-size: 13.5px;
  line-height: 1.8;
}

.media-list__link {
  display: inline-block;
  position: relative;
  color: #9da1a4;
  font-size: 12.5px;
  letter-spacing: .08em;
  padding-bottom: 2px;
  transition: opacity .2s ease;
}

.media-list__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: #ffde1d;
  transition: width 1s cubic-bezier(.22,.9,.32,1) .2s;
}

.media-list__link.is-visible::after {
  width: 100%;
}

.media-list__link:hover { opacity: .6; }

/* "すべて見る" toggle - reveals/hides the .media-list__item--extra entries
   via script.js (hidden attribute), for when the press archive gets long. */
.media-list__toggle[hidden] {
  display: none;
}

.media-list__toggle {
  display: block;
  margin: 32px auto 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: #9da1a4;
  font-family: inherit;
  font-size: 12.5px;
  letter-spacing: .08em;
  transition: opacity .2s ease;
}

.media-list__toggle:hover { opacity: .6; }

/* ---------- Instagram ---------- */

.instagram {
  padding: clamp(24px, 6vw, 56px) 24px clamp(72px, 10vw, 120px);
  text-align: center;
}

.instagram__heading {
  display: flex;
  justify-content: center;
  color: #33414F;
  margin: 0 0 10px;
}

.instagram__lead {
  color: #33414F;
  font-size: 14px;
  font-family: "fot-tsukuardgothic-std", var(--font-jp-body);
  font-weight: 700;
  margin: 0 0 32px;
}

.instagram-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(6px, 1.4vw, 14px);
  max-width: 860px;
  margin: 0 auto 28px;
}

.instagram-embed {
  position: relative;
  max-width: 765px;
  margin: 0 auto 28px;
}

.instagram-embed .snapwidget-widget {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  pointer-events: none;
}

.instagram-embed__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: pointer;
}

.instagram-grid__item {
  aspect-ratio: 1 / 1;
  background: #f1ede5;
  border-radius: 2px;
  overflow: hidden;
}

.instagram-grid__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.instagram-grid__item--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
  font-size: 12px;
  letter-spacing: .1em;
}

.instagram__link {
  display: inline-block;
  position: relative;
  color: #9da1a4;
  font-size: 13px;
  letter-spacing: .08em;
  padding-bottom: 2px;
  transition: opacity .2s ease;
}

.instagram__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1.5px;
  background: #ffde1d;
  transition: width 1s cubic-bezier(.22,.9,.32,1) .2s;
}

.instagram__link.is-visible::after {
  width: 100%;
}

.instagram__link:hover { opacity: .6; }

/* ---------- Shop (BASE product embeds) ---------- */
/* Placeholder styling - heading copy and card layout to be finalized
   once the client sends their catch copy and preferred embed design. */

.shop {
  padding: clamp(24px, 6vw, 56px) 24px clamp(72px, 10vw, 120px);
  text-align: center;
}

.shop__heading {
  display: flex;
  justify-content: center;
  color: #33414F;
  margin: 0 0 10px;
}

.shop__lead {
  color: #33414F;
  font-size: 14px;
  font-family: "fot-tsukuardgothic-std", var(--font-jp-body);
  font-weight: 700;
  margin: 0 0 32px;
}

.shop-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(12px, 2vw, 24px);
  max-width: 900px;
  margin: 0 auto 28px;
}

.shop-grid__item {
  width: 220px;
  height: 380px;
  background: #f1ede5;
  border-radius: 3px;
  overflow: hidden;
}

.shop-grid__item iframe {
  display: block;
  border: 0;
}

.shop-grid__item--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #D1D3D6;
  color: var(--color-ink);
  font-size: 12px;
  letter-spacing: .1em;
}

.shop__link {
  display: inline-block;
  position: relative;
  color: #9da1a4;
  font-size: 13px;
  letter-spacing: .08em;
  padding-bottom: 2px;
  transition: opacity .2s ease;
}

.shop__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1.5px;
  background: #ffde1d;
  transition: width 1s cubic-bezier(.22,.9,.32,1) .2s;
}

.shop__link.is-visible::after {
  width: 100%;
}

.shop__link:hover { opacity: .6; }

/* ---------- Stores ---------- */

.stores {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(28px, 5vw, 64px);
  max-width: 980px;
  margin: 0 auto;
  padding: 0 24px clamp(64px, 9vw, 110px);
}

.store-card__name {
  font-family: "zen-kaku-gothic-new", "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 19px;
  margin: 0 0 16px;
}

.store-card__photo {
  aspect-ratio: 4 / 3;
  border-radius: 3px;
  overflow: hidden;
  background: #eee;
  margin-bottom: 14px;
}

.store-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.store-card__address {
  font-size: 13.5px;
  color: #9da1a4;
  margin: 0 0 4px;
}

.store-card__address a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 2px;
  transition: text-decoration-color .2s ease, color .2s ease;
}

.store-card__address a:hover {
  text-decoration-color: currentColor;
  color: #ffde1d;
}

.store-card__detail {
  font-size: 13.5px;
  color: #9da1a4;
  margin: 0 0 4px;
}

.store-card__detail a {
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color .2s ease;
}

.store-card__detail a:hover { color: #ffde1d; }

.store-card__tel-icon {
  flex-shrink: 0;
}

/* ---------- Brand signature ---------- */

.brand-signature {
  text-align: center;
  padding: 0 24px clamp(64px, 9vw, 110px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* Circular "window" frame around the brand-signature icon, matching the
   arch shape (semicircle top, flat bottom) of the original footer badge
   (assets/logo-footer.svg)'s clip-path. */
.brand-window {
  width: 128px;
  aspect-ratio: 1 / 1;
  border-radius: 50% 50% 0 0;
  background: #9da1a4;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.brand-logo-mark {
  display: block;
  width: 74px;
  height: auto;
  overflow: visible;
}

/* Brand-signature logo intro - same M-fade / sun-rise animation as the
   hero mark (icon only, no wordmark). Uses .repeat-reveal (not .reveal),
   so unlike the other scroll-reveal sections this one replays every time
   it scrolls into view (see the dedicated observer in script.js). */
.brand-logo-mark__m-fade {
  opacity: 0;
  transition: opacity .7s ease-out;
}

#brand-logo.is-visible .brand-logo-mark__m-fade {
  opacity: 1;
}

.brand-logo-mark__sun-rise {
  transform: translateY(95px);
  opacity: 0;
  transition: transform 2.3s cubic-bezier(.22,.9,.32,1) .9s, opacity .6s ease-out .9s;
}

#brand-logo.is-visible .brand-logo-mark__sun-rise {
  transform: translateY(0);
  opacity: 1;
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--color-footer);
  color: var(--color-footer-ink);
}

.site-footer__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 56px 24px;
  display: flex;
  align-items: center;
  gap: clamp(20px, 4vw, 40px);
  flex-wrap: wrap;
}

.site-footer__info {
  font-size: 12.5px;
  line-height: 1.9;
  color: #9da1a4;
}

.site-footer__info p { margin: 0; }

.site-footer__info a {
  transition: color .2s ease;
}

.site-footer__info a:hover {
  color: #ffde1d;
}

.site-footer__copy {
  margin: 0 0 0 auto;
  font-size: 11px;
  color: #9da1a4;
}

.site-footer__credit a {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 2px;
  transition: opacity .2s ease, text-decoration-color .2s ease, color .2s ease;
}

.site-footer__credit a:hover {
  text-decoration-color: currentColor;
  color: #ffde1d;
  opacity: .75;
}

/* ---------- Responsive ---------- */

@media (max-width: 820px) {
  .stores {
    grid-template-columns: 1fr;
    max-width: 420px;
  }
  .site-footer__copy {
    margin-left: 0;
    order: 3;
  }
}

@media (max-width: 560px) {
  :root { --header-height: 68px; }
  .header-logo-mark--wide { display: none; }
  .header-logo-mark--compact { display: block; height: 46px; }
  .instagram-grid { max-width: 340px; }
  .hero-logo-mark { width: 150px; }
  .brand-window { width: 102px; }
  .brand-logo-mark { width: 59px; }
  .footer-logo-mark { width: 81px; }

  .menu-toggle {
    display: flex;
  }

  .header-icons {
    position: absolute;
    top: 50%;
    right: calc(100% + 4px);
    flex-direction: row;
    align-items: center;
    gap: 2px;
    background: #9da1a4;
    padding: 10px 8px;
    opacity: 0;
    transform: translateY(-50%) translateX(10px);
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
    will-change: opacity, transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  .header-icons.is-open {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
    pointer-events: auto;
  }

  /* Bigger tap targets for touch: padding pushes the invisible hit area
     out beyond each icon's visible edges, without changing how big the
     icons themselves look. */
  .header-icons a {
    padding: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .repeat-reveal,
  .site-header,
  .hero-logo-mark__m-fade,
  .hero-logo-mark__sun-rise,
  .hero-logo-mark__wordmark-fade,
  .brand-logo-mark__m-fade,
  .brand-logo-mark__sun-rise,
  .tagline__heading .char-rise,
  .tagline__body {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    pointer-events: auto !important;
  }

  .instagram__link::after,
  .shop__link::after,
  .media-list__link::after {
    transition: none !important;
    width: 100% !important;
  }
}