/* ============================================================
   newmix — hand-rebuilt replica
   tokens lifted from source: black bg, mono palette, one red accent
   ============================================================ */
@font-face{font-family:"SF Pro";src:url(assets/fonts/SF-Pro-Subset.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Pretendard";src:url(assets/fonts/PretendardVariable.woff2) format("woff2-variations");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --black:#000;
  --white:#f5f5f5;
  --gray:#a4a4a4;
  --line:#202020;
  --red:#fb2c36;
  --ease-out:cubic-bezier(.33,1,.68,1);
  --ease-back:cubic-bezier(.34,1.56,.64,1);
  --pad:clamp(20px,5vw,120px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{background:#000;-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  background:#000;color:var(--white);
  font-family:"SF Pro","Pretendard",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-weight:400;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--red);color:#fff}

/* ============================= HEADER ============================= */
.header{position:fixed;inset:0 0 auto 0;z-index:100;background:transparent;
  transition:background .4s var(--ease-out),backdrop-filter .4s var(--ease-out)}
.header.scrolled{background:rgba(0,0,0,.55);backdrop-filter:blur(14px)}
.header-inner{display:flex;align-items:center;justify-content:space-between;
  padding:22px var(--pad)}
.logo{font-weight:700;font-size:22px;letter-spacing:-.02em}
.nav-desktop{display:none;gap:36px}
.nav-desktop a{font-size:15px;color:var(--white);opacity:.85;position:relative;transition:opacity .3s}
.nav-desktop a::after{content:"";position:absolute;left:0;bottom:-4px;height:1px;width:0;background:var(--white);transition:width .35s var(--ease-out)}
.nav-desktop a:hover{opacity:1}
.nav-desktop a:hover::after{width:100%}
.header-right{display:flex;align-items:center;gap:18px}

.lang{position:relative;display:none}
.lang-btn{display:flex;align-items:center;gap:6px;font-size:14px;opacity:.9}
.lang-caret{transition:transform .3s var(--ease-out)}
.lang.open .lang-caret{transform:rotate(180deg)}
.lang-menu{position:absolute;top:140%;right:0;background:#111;border:1px solid var(--line);
  border-radius:12px;padding:6px;min-width:96px;list-style:none;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:.28s var(--ease-out)}
.lang.open .lang-menu{opacity:1;visibility:visible;transform:translateY(0)}
.lang-menu button{display:block;width:100%;text-align:left;padding:8px 12px;border-radius:8px;font-size:14px;color:var(--gray);transition:.2s}
.lang-menu button:hover{background:#1d1d1d;color:#fff}
.lang-menu .is-active{color:#fff}

.burger{display:flex;flex-direction:column;gap:5px;width:26px}
.burger span{height:2px;background:#fff;border-radius:2px;transition:.35s var(--ease-out)}
body.menu-open .burger span:first-child{transform:translateY(3.5px) rotate(45deg)}
body.menu-open .burger span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* mobile menu */
.mobile-menu{position:fixed;inset:0;z-index:90;background:#000;
  padding:140px var(--pad) 40px;display:flex;flex-direction:column;justify-content:space-between;
  clip-path:inset(0 0 100% 0);transition:clip-path .6s var(--ease-out);pointer-events:none}
body.menu-open .mobile-menu{clip-path:inset(0 0 0 0);pointer-events:auto}
.mobile-nav{display:flex;flex-direction:column;gap:6px}
.mobile-nav a{font-size:44px;font-weight:700;letter-spacing:-.03em;
  opacity:0;transform:translateY(40px);transition:.6s var(--ease-out)}
body.menu-open .mobile-nav a{opacity:1;transform:none}
body.menu-open .mobile-nav a:nth-child(1){transition-delay:.10s}
body.menu-open .mobile-nav a:nth-child(2){transition-delay:.16s}
body.menu-open .mobile-nav a:nth-child(3){transition-delay:.22s}
body.menu-open .mobile-nav a:nth-child(4){transition-delay:.28s}
.mobile-lang{display:flex;gap:18px;flex-wrap:wrap}
.mobile-lang button{font-size:15px;color:var(--gray)}
.mobile-lang .is-active{color:#fff}

/* ============================= HERO ============================= */
.hero{position:relative;width:100vw;height:100svh;z-index:20;overflow:hidden;background:#000}
.hero-hint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:5;font-size:clamp(13px,1.4vw,16px);letter-spacing:.08em;color:var(--gray);
  text-transform:uppercase;animation:pulse 2.4s var(--ease-out) infinite;pointer-events:none}
.hero-hint.hide{opacity:0;transition:opacity .5s}
.hero-stage{position:absolute;inset:0;z-index:4;touch-action:none}
.hero-card{position:absolute;width:clamp(120px,15vw,210px);aspect-ratio:3/4;
  border-radius:10px;overflow:hidden;will-change:transform;cursor:grab;
  box-shadow:0 24px 60px rgba(0,0,0,.55)}
.hero-card:active{cursor:grabbing}
.hero-card img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.hero-copy{position:absolute;left:0;right:0;bottom:clamp(40px,7vh,80px);z-index:6;
  text-align:center;padding:0 var(--pad);pointer-events:none}
.hero-mark{height:clamp(34px,5vw,64px);width:auto;margin:0 auto 22px;opacity:.95}
.hero-mark-text{display:block;font-size:clamp(40px,8vw,96px);font-weight:700;letter-spacing:-.04em;
  line-height:1;margin:0 auto 22px;color:#fff}
.hero-lines{font-size:clamp(13px,1.5vw,17px);color:var(--gray);line-height:1.6}
.hero-lines .line{display:block;overflow:hidden}
.hero-lines .line>span{display:block;transform:translateY(110%);transition:transform .9s var(--ease-out)}
.hero-lines .line.in>span{transform:translateY(0)}
.hero-fade{position:absolute;inset:auto 0 0 0;height:30vh;z-index:3;pointer-events:none;
  background:linear-gradient(to bottom,transparent,#000)}

/* ============================= MANIFESTO ============================= */
.manifesto{position:relative;z-index:10;background:#000;padding:clamp(120px,22vh,260px) var(--pad)}
.manifesto-title{font-size:clamp(34px,7vw,104px);font-weight:700;line-height:1.04;
  letter-spacing:-.03em;text-align:center}
.reveal{display:block;overflow:hidden}
.reveal>span{display:block;transform:translateY(108%);opacity:0;
  transition:transform 1s var(--ease-out),opacity 1s var(--ease-out)}
.reveal.in>span{transform:translateY(0);opacity:1}
.reveal:nth-child(2)>span{transition-delay:.12s}

.marquee{margin-top:clamp(60px,10vh,120px);overflow:hidden;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;align-items:center;gap:36px;width:max-content;
  animation:marquee-scroll 28s linear infinite}
.marquee-track span{font-size:clamp(28px,4.5vw,64px);font-weight:600;letter-spacing:-.02em;white-space:nowrap}
.marquee-track i{color:var(--red);font-style:normal;font-size:clamp(16px,2vw,28px)}

/* ============================= STORY VIDEO ============================= */
.story{position:relative;z-index:1;background:#000}
.story-video{width:100%;height:120svh}
.story-video video{width:100%;height:100%;object-fit:cover}

/* ============================= GALLERY ============================= */
.gallery-section{position:relative;z-index:2;overflow:hidden;background:#000;
  padding:80px 10%;margin-top:-55vh}
.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2vw,30px);max-width:1400px;margin:0 auto}
.gallery-cell{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:4/5;
  transform:translateY(120%);opacity:0}
.gallery-cell img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:transform 1.2s var(--ease-out)}
.gallery-cell.in{opacity:1;transform:translateY(0);transition:transform 1s var(--ease-out),opacity 1s var(--ease-out)}
.gallery-cell.in img{transform:scale(1)}

/* ============================= SHARED BLOCKS ============================= */
.block{position:relative;z-index:3;background:#000;padding:clamp(80px,12vh,160px) var(--pad)}
.block-head{max-width:1400px;margin:0 auto clamp(40px,6vh,80px)}
.section-title{font-size:clamp(32px,5.5vw,56px);font-weight:700;letter-spacing:-.02em;
  opacity:0;transition:opacity 1s var(--ease-out)}
.section-title.in{opacity:1}
.section-sub{margin-top:18px;font-size:clamp(15px,1.6vw,19px);color:var(--gray);max-width:46ch;
  opacity:0;transform:translateY(20px);transition:.9s var(--ease-out) .1s}
.section-sub.in{opacity:1;transform:none}
.pill{display:inline-flex;align-items:center;gap:8px;margin-top:28px;padding:13px 26px;
  border-radius:999px;background:var(--white);color:#000;font-size:14px;font-weight:600;
  transition:transform .35s var(--ease-back),background .3s}
.pill:hover{transform:translateY(-2px)}
.pill.ghost{background:transparent;color:#fff;border:1px solid var(--line)}
.pill.ghost:hover{border-color:#fff}

/* products */
.product-row{display:flex;gap:clamp(16px,2vw,28px);max-width:1400px;margin:0 auto;
  overflow-x:auto;padding-bottom:14px;scrollbar-width:none}
.product-row::-webkit-scrollbar{display:none}
.product-card{flex:0 0 auto;width:clamp(220px,26vw,320px)}
.product-card .pimg{aspect-ratio:1;border-radius:14px;overflow:hidden;background:#0d0d0d;
  opacity:0;transform:translateY(30px)}
.product-card.in .pimg{opacity:1;transform:none;transition:.8s var(--ease-out)}
.product-card .pimg img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
.product-card:hover .pimg img{transform:scale(1.05)}
.product-card p{margin-top:14px;font-size:15px;color:var(--gray)}

/* stores */
.store-list{max-width:1400px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(50px,8vh,110px)}
.store{display:grid;grid-template-columns:1fr;gap:24px;align-items:center}
.store-img{border-radius:16px;overflow:hidden;aspect-ratio:16/10}
.store-img img{width:100%;height:100%;object-fit:cover;transform:scale(1.12)}
.store.in .store-img img{transform:scale(1);transition:transform 1.4s var(--ease-out)}
.store-info h3{font-size:clamp(24px,3.4vw,40px);font-weight:700;letter-spacing:-.02em}
.store-info .addr{margin-top:14px;color:var(--white);font-size:17px}
.store-info .hours{margin-top:6px;color:var(--gray);font-size:15px}

/* online */
.online-links{max-width:1400px;margin:0 auto;display:grid;gap:18px;grid-template-columns:1fr}
.online-card{display:flex;align-items:center;justify-content:space-between;
  padding:clamp(28px,4vw,46px);border:1px solid var(--line);border-radius:16px;
  font-size:clamp(22px,3vw,34px);font-weight:600;transition:.4s var(--ease-out)}
.online-card svg{color:var(--gray);transition:.4s var(--ease-out)}
.online-card:hover{background:#0d0d0d;border-color:#333}
.online-card:hover svg{color:#fff;transform:translate(4px,-4px)}

/* contact */
.contact-marquee{overflow:hidden;margin:0 calc(-1 * var(--pad)) clamp(30px,5vh,60px)}
.contact-track{display:flex;gap:40px;width:max-content;animation:marquee-scroll 26s linear infinite}
.contact-track video{height:clamp(120px,30vh,320px);width:auto}
.contact-mail{display:inline-block;font-size:clamp(26px,5vw,72px);font-weight:700;letter-spacing:-.03em;
  transition:color .3s}
.contact-mail:hover{color:var(--red)}

/* ============================= FOOTER ============================= */
.footer{background:#000;padding:clamp(80px,14vh,160px) var(--pad) 70px;
  display:flex;flex-direction:column;align-items:center;gap:clamp(60px,9vh,120px)}
.footer-video{width:100%;max-width:1500px}
.footer-video video{width:100%}
.footer-grid{width:100%;max-width:1400px;display:grid;gap:40px;grid-template-columns:1fr;
  border-top:1px solid var(--line);padding-top:50px}
.footer-col p{font-size:15px;color:var(--gray);line-height:1.7}
.footer-col p a:hover{color:#fff}
.footer-label{color:#fff!important;font-weight:600;margin-bottom:10px}
.footer-links{display:flex;flex-direction:column;gap:10px;font-size:18px;font-weight:300}
.footer-links a{color:#fff}
.footer-links a:hover{color:var(--gray)}
.footer-legal p{font-size:13px}

/* ============================= KEYFRAMES (matched to source) ============================= */
@keyframes marquee-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes pulse{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============================= RESPONSIVE ============================= */
@media (min-width:1024px){
  .nav-desktop{display:flex}
  .lang{display:block}
  .burger{display:none}
  .gallery-grid{grid-template-columns:repeat(4,1fr);gap:30px}
  .gallery-section{margin-top:-20vh;padding:80px 10%}
  .online-links{grid-template-columns:1fr 1fr}
  .store{grid-template-columns:1.4fr 1fr;gap:60px}
  .store:nth-child(even){direction:rtl}
  .store:nth-child(even) .store-info{direction:ltr}
  .footer-grid{grid-template-columns:1.4fr 1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .line>span,.reveal>span,.gallery-cell,.section-title,.section-sub,.product-card .pimg{opacity:1!important;transform:none!important}
}