/* =====================================================================
   MINUIT TOKYO — Coming Soon
   French Riviera × Japan · Abu Dhabi
   Palette: noir · brushed silver · warm gold · sakura
   ===================================================================== */

:root{
  --noir:      #0a0a0b;
  --noir-2:    #101012;
  --velvet:    #16151a;
  --ink:       #050506;

  --silver-1:  #f2efe9;
  --silver-2:  #cfcabf;
  --silver-3:  #9a948a;
  --gold:      #c9a86a;
  --gold-soft: #d8c193;
  --sakura:    #e7b4ac;

  --text:      #d9d6cf;
  --text-dim:  #928d84;

  --maxw: 1240px;
  --ease: cubic-bezier(.16,.68,.28,1);

  --f-serif: "Cormorant Garamond", Georgia, serif;
  --f-sans:  "Jost", "Century Gothic", system-ui, sans-serif;
  --f-jp:    "Noto Serif JP", serif;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  background:var(--noir);
  color:var(--text);
  font-family:var(--f-sans);
  font-weight:300;
  line-height:1.6;
  overflow-x:hidden;
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
}

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

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- shared bits ---------- */
.kicker{
  font-size:.72rem; letter-spacing:.42em; text-transform:uppercase;
  color:var(--gold); font-weight:400;
}
.silver-text{
  background:linear-gradient(120deg,var(--silver-3) 0%,var(--silver-1) 35%,#fff 50%,var(--silver-1) 65%,var(--silver-3) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* =====================================================================
   FILM GRAIN + PETALS
   ===================================================================== */
.grain{
  position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%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");
}

.petals{ position:fixed; inset:0; z-index:55; pointer-events:none; overflow:hidden; }
.petal{
  position:absolute; top:-6vh; width:14px; height:14px;
  background:radial-gradient(circle at 30% 30%, #f4d2cc, var(--sakura));
  border-radius:14px 1px 14px 1px;
  opacity:.7; will-change:transform;
  animation:fall linear infinite;
}
@keyframes fall{
  0%{ transform:translate3d(0,0,0) rotate(0deg); }
  100%{ transform:translate3d(40px,110vh,0) rotate(420deg); }
}

/* =====================================================================
   TOP BAR
   ===================================================================== */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px clamp(20px,4vw,54px);
  transition:background .5s var(--ease), padding .5s var(--ease), backdrop-filter .5s;
}
.topbar.is-scrolled{
  background:rgba(10,10,11,.72); backdrop-filter:blur(14px);
  padding-top:14px; padding-bottom:14px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.topbar__brand{ display:flex; align-items:center; gap:14px; text-decoration:none; color:var(--silver-1); }
.topbar__mark{
  font-size:1.05rem; letter-spacing:.05em; font-weight:400;
  border:1px solid var(--silver-3); border-radius:50%;
  width:38px; height:38px; display:grid; place-items:center;
  color:var(--silver-1);
}
.topbar__slash{ color:var(--gold); margin:0 -1px; }
.topbar__name{ font-size:.82rem; letter-spacing:.44em; font-weight:300; }
.topbar__right{ display:flex; align-items:center; gap:20px; }
.topbar__loc{ font-size:.68rem; letter-spacing:.28em; text-transform:uppercase; color:var(--text-dim); }
.lang{ display:flex; align-items:center; gap:8px; }
.lang__btn{
  background:none; border:none; cursor:pointer; color:var(--text-dim);
  font-family:var(--f-sans); font-size:.72rem; letter-spacing:.2em; font-weight:400;
  padding:2px 2px; transition:color .3s;
}
.lang__btn.is-active{ color:var(--gold); }
.lang__btn:hover{ color:var(--silver-1); }
.lang__sep{ color:var(--text-dim); font-size:.7rem; }

@media (max-width:620px){
  .topbar__loc{ display:none; }
  .topbar__name{ font-size:.72rem; letter-spacing:.32em; }
}

/* =====================================================================
   HERO
   ===================================================================== */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:112px clamp(20px,5vw,40px) 92px;
  overflow:hidden;
}
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__slide{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transition:opacity 2.4s ease;
  transform:scale(1.04);
}
.hero__slide.is-active{ opacity:1; animation:kenburns 9s ease-out forwards; }
@keyframes kenburns{ from{ transform:scale(1.02); } to{ transform:scale(1.14); } }

.hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(120% 90% at 50% 32%, rgba(10,10,11,.30) 0%, rgba(10,10,11,.72) 62%, rgba(10,10,11,.95) 100%),
    linear-gradient(180deg, rgba(10,10,11,.55) 0%, rgba(10,10,11,.20) 30%, rgba(10,10,11,.72) 100%);
}

.hero__inner{ position:relative; z-index:2; max-width:760px; width:100%; }

.hero__eyebrow{
  font-size:.72rem; letter-spacing:.5em; text-transform:uppercase;
  color:var(--gold-soft); margin-bottom:26px;
}
.hero__logo{
  width:clamp(180px,26vw,268px); height:auto; margin:0 auto 6px;
  mix-blend-mode:screen; /* drops the black square into the scene */
  filter:drop-shadow(0 8px 40px rgba(0,0,0,.6));
}
.hero__slogan{
  display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;
  font-size:clamp(.78rem,2.4vw,1rem); letter-spacing:.44em; font-weight:300;
  color:var(--silver-1); text-transform:uppercase; margin-top:8px;
}
.hero__slogan .x{ color:var(--gold); font-style:normal; font-size:1.1em; }
.hero__kanji{
  font-family:var(--f-jp); font-size:.94rem; letter-spacing:.5em;
  color:var(--text-dim); margin-top:16px;
}

.hero__divider{ display:flex; align-items:center; justify-content:center; gap:16px; margin:30px auto 26px; max-width:340px; }
.hero__divider span{ height:1px; flex:1; background:linear-gradient(90deg,transparent,var(--silver-3),transparent); }
.hero__divider em{ color:var(--gold); font-size:.6rem; font-style:normal; }

.hero__coming{
  font-family:var(--f-serif); font-weight:400; font-style:italic;
  font-size:clamp(2.6rem,8vw,4.6rem); line-height:1; letter-spacing:.01em;
  background:linear-gradient(120deg,var(--silver-3),var(--silver-1) 45%,#fff 52%,var(--silver-1) 60%,var(--silver-3));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size:220% auto; animation:shimmer 7s linear infinite;
  margin-bottom:20px;
}
@keyframes shimmer{ to{ background-position:220% center; } }

.hero__lede{
  max-width:540px; margin:0 auto 38px;
  font-size:clamp(.95rem,1.5vw,1.06rem); color:var(--text);
  font-weight:300; line-height:1.75;
}

/* ---------- countdown ---------- */
.count{
  display:flex; align-items:flex-start; justify-content:center; gap:clamp(8px,2.4vw,22px);
  margin-bottom:40px;
}
.count__unit{ display:flex; flex-direction:column; align-items:center; min-width:clamp(52px,13vw,84px); }
.count__num{
  font-family:var(--f-serif); font-weight:500;
  font-size:clamp(2.1rem,7vw,3.4rem); line-height:1; color:var(--silver-1);
  font-variant-numeric:tabular-nums;
}
.count__lbl{
  font-size:.6rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--text-dim); margin-top:10px;
}
.count__colon{
  font-family:var(--f-serif); font-size:clamp(1.6rem,5vw,2.6rem);
  color:var(--gold); line-height:1.1; opacity:.6;
  animation:blink 2s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity:.15; } }

/* ---------- notify ---------- */
.notify{
  display:flex; gap:0; max-width:440px; margin:0 auto 40px;
  border:1px solid rgba(207,202,191,.28); border-radius:2px;
  background:rgba(10,10,11,.4); backdrop-filter:blur(6px);
  position:relative; flex-wrap:wrap;
}
.notify__input{
  flex:1 1 200px; min-width:0; background:none; border:none; outline:none;
  color:var(--silver-1); font-family:var(--f-sans); font-weight:300;
  font-size:.86rem; letter-spacing:.04em; padding:15px 18px;
}
.notify__input::placeholder{ color:var(--text-dim); }
.notify__btn{
  flex:0 0 auto; cursor:pointer; border:none;
  background:linear-gradient(120deg,var(--gold),var(--gold-soft));
  color:var(--ink); font-family:var(--f-sans); font-weight:500;
  font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  padding:15px 26px; transition:filter .3s, transform .3s;
}
.notify__btn:hover{ filter:brightness(1.12); }
.notify__msg{
  flex-basis:100%; text-align:center; font-size:.78rem; color:var(--gold-soft);
  letter-spacing:.06em; padding:0; height:0; overflow:hidden; transition:all .4s var(--ease);
}
.notify__msg.show{ height:auto; padding:12px 10px 4px; }

/* ---------- social ---------- */
.social{ display:flex; align-items:center; justify-content:center; gap:16px; }
.social__link{
  width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid rgba(207,202,191,.26); color:var(--silver-2);
  transition:transform .35s var(--ease), color .35s, border-color .35s, background .35s;
}
.social__link svg{ width:19px; height:19px; fill:currentColor; }
.social__link:hover{
  color:var(--ink); background:var(--silver-1); border-color:var(--silver-1);
  transform:translateY(-4px);
}

/* ---------- scroll cue ---------- */
.hero__scroll{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  z-index:3; display:flex; flex-direction:column; align-items:center; gap:12px;
  text-decoration:none; color:var(--text-dim);
  font-size:.6rem; letter-spacing:.36em; text-transform:uppercase;
}
.hero__scroll em{ width:1px; height:44px; background:linear-gradient(var(--silver-3),transparent); position:relative; overflow:hidden; }
.hero__scroll em::after{
  content:""; position:absolute; top:0; left:0; width:100%; height:40%;
  background:var(--gold); animation:trickle 2.2s var(--ease) infinite;
}
@keyframes trickle{ 0%{ transform:translateY(-100%); } 60%,100%{ transform:translateY(260%); } }

/* =====================================================================
   CONCEPT
   ===================================================================== */
.concept{ background:var(--noir); padding:clamp(90px,14vw,168px) clamp(24px,6vw,80px); }
.concept__inner{ max-width:820px; margin:0 auto; text-align:center; }
.concept__title{
  font-family:var(--f-serif); font-weight:300; line-height:1.12;
  font-size:clamp(2.3rem,6vw,4.1rem); margin:24px 0 34px; color:var(--silver-1);
}
.concept__title em{ font-style:italic; color:var(--gold-soft); }
.concept__body{
  font-size:clamp(1rem,1.7vw,1.18rem); line-height:1.9; color:var(--text);
  font-weight:300; max-width:640px; margin:0 auto;
}
.concept__tags{
  list-style:none; display:flex; align-items:center; justify-content:center;
  gap:16px; margin-top:40px; flex-wrap:wrap;
  font-size:.72rem; letter-spacing:.34em; text-transform:uppercase; color:var(--text-dim);
}
.concept__tags li:nth-child(odd){ color:var(--silver-2); }

/* =====================================================================
   SIGNATURES
   ===================================================================== */
.sig{ background:linear-gradient(180deg,var(--noir),var(--ink)); padding:clamp(70px,10vw,120px) clamp(18px,5vw,64px) clamp(90px,12vw,150px); }
.sig__head{ text-align:center; margin-bottom:clamp(40px,6vw,70px); }
.sig__title{
  font-family:var(--f-serif); font-weight:300; font-size:clamp(2rem,5vw,3.2rem);
  color:var(--silver-1); margin-top:16px;
}
.sig__grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(14px,2vw,26px);
}
.card{ position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.06); background:var(--velvet); }
.card img{ width:100%; height:100%; object-fit:cover; aspect-ratio:5/4; transition:transform 1.2s var(--ease), filter 1.2s; filter:saturate(.96); }
.card:hover img{ transform:scale(1.05); filter:saturate(1.05); }
.card figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:34px 22px 18px;
  background:linear-gradient(transparent, rgba(5,5,6,.85));
  opacity:0; transform:translateY(10px); transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.card figcaption span{
  font-family:var(--f-serif); font-style:italic; font-size:1.25rem; color:var(--silver-1);
}
.card:hover figcaption{ opacity:1; transform:translateY(0); }

.sig__mural{
  position:relative; max-width:var(--maxw); margin:clamp(24px,3vw,32px) auto 0;
  overflow:hidden; border:1px solid rgba(255,255,255,.06);
}
.sig__mural img{ width:100%; height:auto; object-fit:cover; max-height:78vh; }
.sig__mural-cap{
  position:absolute; left:0; bottom:0; max-width:min(520px,86%);
  padding:clamp(24px,4vw,48px);
  background:linear-gradient(120deg, rgba(5,5,6,.86), rgba(5,5,6,.15));
}
.sig__mural-cap p:last-child{ margin-top:14px; font-size:clamp(.95rem,1.5vw,1.08rem); color:var(--text); line-height:1.8; font-weight:300; }

@media (max-width:640px){
  .card figcaption{ opacity:1; transform:none; padding:26px 16px 14px; }
  .card figcaption span{ font-size:1.05rem; }
}

/* =====================================================================
   LOCATION
   ===================================================================== */
.loc{
  display:grid; grid-template-columns:1fr 1fr; align-items:stretch;
  background:var(--noir-2); min-height:60vh;
}
.loc__text{
  padding:clamp(56px,8vw,110px) clamp(28px,6vw,90px);
  display:flex; flex-direction:column; justify-content:center;
}
.loc__title{ font-family:var(--f-serif); font-weight:300; font-size:clamp(2.4rem,6vw,4rem); color:var(--silver-1); margin:18px 0 22px; }
.loc__addr{ font-size:1.02rem; line-height:1.8; color:var(--text); letter-spacing:.06em; }
.loc__note{ font-size:.9rem; color:var(--text-dim); margin:22px 0 34px; font-style:italic; }
.btn{
  align-self:flex-start; text-decoration:none;
  border:1px solid var(--gold); color:var(--gold-soft);
  font-size:.74rem; letter-spacing:.26em; text-transform:uppercase; font-weight:400;
  padding:15px 34px; transition:background .4s var(--ease), color .4s;
}
.btn:hover{ background:var(--gold); color:var(--ink); }
.loc__map{ position:relative; min-height:340px; filter:grayscale(1) contrast(1.05) brightness(.82); transition:filter .6s; }
.loc__map:hover{ filter:grayscale(0) contrast(1) brightness(1); }
.loc__map iframe{ position:absolute; inset:0; width:100%; height:100%; }

@media (max-width:860px){
  .loc{ grid-template-columns:1fr; }
  .loc__map{ min-height:320px; order:2; }
}

/* =====================================================================
   FOOTER
   ===================================================================== */
.foot{
  background:var(--ink); text-align:center;
  padding:clamp(56px,8vw,88px) 24px clamp(34px,5vw,48px);
  display:flex; flex-direction:column; align-items:center; gap:26px;
}
.foot__brand{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.foot__mark{
  width:52px; height:52px; border:1px solid var(--silver-3); border-radius:50%;
  display:grid; place-items:center; font-size:1.2rem; letter-spacing:.04em; color:var(--silver-1);
}
.foot__mark span{ color:var(--gold); }
.foot__name{ font-size:.92rem; letter-spacing:.5em; color:var(--silver-1); }
.foot__slogan{ font-family:var(--f-serif); font-style:italic; font-size:1.05rem; color:var(--gold-soft); }
.foot__social{ display:flex; gap:26px; flex-wrap:wrap; justify-content:center; }
.foot__social a{
  color:var(--text-dim); text-decoration:none; font-size:.74rem;
  letter-spacing:.2em; text-transform:uppercase; transition:color .3s;
}
.foot__social a:hover{ color:var(--gold); }
.foot__legal{ font-size:.68rem; letter-spacing:.16em; color:var(--text-dim); }

/* =====================================================================
   REVEAL ANIMATIONS
   ===================================================================== */
.js .reveal{ opacity:0; transform:translateY(24px); }
.hero.is-ready .reveal{ animation:rise 1s var(--ease) forwards; }
.hero.is-ready .hero__eyebrow{ animation-delay:.1s; }
.hero.is-ready .hero__logo{ animation-delay:.25s; }
.hero.is-ready .hero__slogan{ animation-delay:.5s; }
.hero.is-ready .hero__kanji{ animation-delay:.65s; }
.hero.is-ready .hero__divider{ animation-delay:.8s; }
.hero.is-ready .hero__coming{ animation-delay:.9s; }
.hero.is-ready .hero__lede{ animation-delay:1.05s; }
.hero.is-ready .count{ animation-delay:1.2s; }
.hero.is-ready .notify{ animation-delay:1.35s; }
.hero.is-ready .social{ animation-delay:1.5s; }
@keyframes rise{ to{ opacity:1; transform:none; } }

.js .reveal-up{ opacity:0; transform:translateY(34px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal-up.in-view{ opacity:1; transform:none; }
.reveal-up:nth-child(2){ transition-delay:.08s; }
.reveal-up:nth-child(3){ transition-delay:.16s; }
.reveal-up:nth-child(4){ transition-delay:.24s; }

/* =====================================================================
   REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .hero__slide.is-active{ animation:none; }
  .petals{ display:none; }
  .reveal,.reveal-up{ opacity:1 !important; transform:none !important; }
}