/* HONABI — teaser landing page
   Colour + pattern system taken from the brand moodboard. */

:root{
  --ink:#111111;
  --wasabi:#B9FF25;
  --violet:#6C35F2;
  --olive:#789B42;
  --olive-deep:#668B3A;
  --paper:#FFFFFF;
  --mute:rgba(255,255,255,.60);
  --pad:clamp(20px,5.5vw,88px);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:#000000; color:var(--paper);
  font-family:'Space Grotesk','Helvetica Neue',Arial,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--wasabi); text-decoration:none; }
a:hover{ color:var(--violet); }

.display{
  font-family:'Archivo Black','Arial Black',sans-serif; font-weight:400;
  text-transform:uppercase; line-height:.88; text-wrap:balance; margin:0;
}
.jp{ font-family:'Zen Kaku Gothic New','Hiragino Sans','Yu Gothic',sans-serif; }
.mono{
  font-family:'Space Grotesk','Helvetica Neue',Arial,sans-serif;
  text-transform:uppercase; letter-spacing:.2em; font-weight:500;
}
.wrap{ padding-left:var(--pad); padding-right:var(--pad); }

/* ---------- language switcher ---------- */
.langswitch{ display:flex; gap:3px; }
.langswitch a{
  font-family:'Space Grotesk',Arial,sans-serif; text-transform:uppercase;
  letter-spacing:.16em; font-weight:500; font-size:10px;
  padding:9px 13px; border:1px solid rgba(255,255,255,.3);
  color:var(--paper); border-radius:999px; line-height:1;
}
.langswitch a:hover{ border-color:var(--wasabi); color:var(--wasabi); }
.langswitch a[aria-current="true"]{
  background:var(--wasabi); border-color:var(--wasabi); color:var(--ink);
}
.langswitch--hero{ position:absolute; top:22px; right:var(--pad); z-index:20; }
.langswitch--foot a{ border-color:rgba(17,17,17,.28); color:var(--ink); }
.langswitch--foot a:hover{ border-color:var(--violet); color:var(--violet); }
.langswitch--foot a[aria-current="true"]{
  background:var(--ink); border-color:var(--ink); color:var(--paper);
}

/* ---------- pattern system ---------- */
.p-tunnel{
  background-image:radial-gradient(circle,var(--violet) 1.7px,transparent 1.9px);
  background-size:13px 13px;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,transparent 0 10%,#000 24% 56%,transparent 75%);
  mask-image:radial-gradient(circle at 50% 50%,transparent 0 10%,#000 24% 56%,transparent 75%);
}
.p-rays{
  background-image:repeating-conic-gradient(from 0deg at 50% 50%,var(--wasabi) 0deg 1.1deg,transparent 1.1deg 4.4deg);
  -webkit-mask-image:radial-gradient(circle,transparent 0 7%,#000 16% 60%,transparent 78%),radial-gradient(circle,#000 38%,transparent 40%);
  -webkit-mask-size:100% 100%,6px 6px;
  -webkit-mask-composite:source-in;
  mask-image:radial-gradient(circle,transparent 0 7%,#000 16% 60%,transparent 78%),radial-gradient(circle,#000 38%,transparent 40%);
  mask-size:100% 100%,6px 6px;
  mask-composite:intersect;
}
.p-check-bw{
  background-image:repeating-conic-gradient(var(--paper) 0% 25%,#000 0% 50%);
  background-size:clamp(46px,5vw,74px) clamp(46px,5vw,74px); filter:url(#hb-warp);
}
.p-check-green{
  background-image:repeating-conic-gradient(var(--wasabi) 0% 25%,#000 0% 50%);
  background-size:clamp(34px,3.6vw,52px) clamp(34px,3.6vw,52px); filter:url(#hb-warp);
}
.p-check-violet{
  background-image:repeating-conic-gradient(var(--violet) 0% 25%,#000 0% 50%);
  background-size:clamp(34px,3.6vw,52px) clamp(34px,3.6vw,52px); filter:url(#hb-warp);
}
.p-waves{
  background-image:repeating-linear-gradient(0deg,var(--wasabi) 0 clamp(10px,1vw,15px),#000 clamp(10px,1vw,15px) clamp(26px,2.6vw,38px));
  filter:url(#hb-warp);
}
.speckle{
  background-color:var(--wasabi);
  background-image:
    radial-gradient(circle,rgba(17,17,17,.55) 1.2px,transparent 1.4px),
    radial-gradient(circle,rgba(102,139,58,.5) 1px,transparent 1.2px);
  background-size:17px 17px,11px 23px;
  background-position:0 0,7px 5px;
}
.wave-bot{ clip-path:url(#hb-wave); transform:scaleY(-1); }

/* ---------- motion ---------- */
@keyframes hb-rise{ from{opacity:0;transform:translateY(38px);} to{opacity:1;transform:none;} }
@keyframes hb-drop{ from{opacity:0;transform:translateY(-64px) rotate(-9deg);} to{opacity:1;transform:rotate(-4deg);} }
@keyframes hb-spin{ to{transform:rotate(360deg);} }
@keyframes hb-tick{ to{transform:translateX(-50%);} }
@keyframes hb-breathe{ 0%,100%{opacity:.7;} 50%{opacity:1;} }
.rise{ animation:hb-rise .95s cubic-bezier(.16,.84,.36,1) both; }
.d1{animation-delay:.05s}.d2{animation-delay:.16s}.d3{animation-delay:.27s}
.d4{animation-delay:.38s}.d5{animation-delay:.5s}
.drop{ animation:hb-drop 1.25s cubic-bezier(.2,.9,.3,1) .3s both; }
.spin{ animation:hb-spin 52s linear infinite; }
.breathe{ animation:hb-breathe 6s ease-in-out infinite; }
.tickrow{ display:flex; width:max-content; animation:hb-tick 26s linear infinite; }

@media (prefers-reduced-motion:reduce){
  .rise,.drop{ animation:none; opacity:1; transform:none; }
  .spin,.breathe,.tickrow{ animation:none; }
}

/* ---------- hero ---------- */
.hero{ position:relative; overflow:hidden; padding-bottom:clamp(90px,11vw,150px); }
.hero__deco-tunnel{
  position:absolute; top:clamp(-180px,-14vw,-260px); right:clamp(-220px,-18vw,-300px);
  width:clamp(520px,72vw,1080px); aspect-ratio:1; opacity:.9; pointer-events:none;
}
.hero__deco-rays{
  position:absolute; left:clamp(-220px,-18vw,-300px); top:26%;
  width:clamp(420px,54vw,800px); aspect-ratio:1; opacity:.13; pointer-events:none;
}
.hero__inner{
  position:relative; display:flex; align-items:center;
  gap:clamp(28px,4vw,56px); padding-top:clamp(74px,7vw,0px);
}
.hero__copy{ flex:0 1 690px; min-width:0; }
.hero__eyebrow{ display:flex; align-items:center; gap:16px; margin-bottom:clamp(26px,3vw,40px); }
.hero__eyebrow img{ width:clamp(30px,3vw,42px); }
.hero__eyebrow span{ font-size:clamp(9px,.85vw,11px); color:var(--mute); }
.hero h1{ font-size:clamp(56px,12.6vw,168px); letter-spacing:.05em; }
.hero__jp{ margin-top:clamp(14px,1.8vw,26px); font-size:clamp(19px,2.7vw,38px); font-weight:700; letter-spacing:.16em; color:var(--wasabi); }
.hero__p{ margin:clamp(22px,2.7vw,38px) 0 0; max-width:480px; font-size:clamp(16px,1.5vw,21px); line-height:1.5; color:var(--mute); text-wrap:pretty; }
.chip{
  display:inline-block; margin-top:clamp(26px,3.1vw,44px);
  padding:14px 24px; border:1.5px solid var(--wasabi); border-radius:999px;
  font-size:clamp(10px,.85vw,11px); color:var(--wasabi);
}
.hero__shot{ position:relative; flex:1 1 auto; display:flex; justify-content:center; align-items:center; }
.hero__glow{
  position:absolute; width:clamp(320px,42vw,560px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,rgba(185,255,37,.22),transparent 68%); filter:blur(30px);
}
.hero__tube{ position:relative; width:clamp(200px,23vw,310px); transform:rotate(-4deg); }
.seal{ position:absolute; left:0; bottom:clamp(60px,10vw,150px); width:clamp(88px,11vw,150px); }
.hero__wave{ position:absolute; bottom:0; left:0; width:100%; height:clamp(70px,9vw,130px); }

@media (max-width:900px){
  .hero__inner{ flex-direction:column; align-items:stretch; padding-top:78px; }
  .hero__copy{ flex:none; }
  .hero__shot{ margin-top:14px; }
  .seal{ left:2px; }
}

/* ---------- ticker ---------- */
.ticker{ background:var(--wasabi); overflow:hidden; padding:clamp(12px,1.1vw,15px) 0; }
.ticker__set{ display:flex; gap:clamp(32px,3.6vw,52px); padding-right:clamp(32px,3.6vw,52px);
  font-size:clamp(11px,1vw,13px); color:var(--ink); white-space:nowrap; }

/* ---------- sections ---------- */
.section{ padding-top:clamp(54px,7.7vw,112px); padding-bottom:clamp(60px,8.6vw,124px); }
.label{ font-size:clamp(9px,.85vw,11px); color:var(--mute); display:block; }
.section h2{ margin:clamp(16px,1.5vw,20px) 0 clamp(30px,4.7vw,68px); font-size:clamp(32px,6.1vw,80px); letter-spacing:.02em; max-width:1020px; }

.split{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(14px,1.8vw,26px); }
@media (max-width:820px){ .split{ grid-template-columns:1fr; } }
.pane{ position:relative; overflow:hidden; padding:clamp(30px,3.6vw,52px) clamp(24px,3.3vw,48px) clamp(34px,3.9vw,56px); min-height:clamp(0px,24vw,352px); }
.pane--honey{ background:var(--paper); }
.pane__rays{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:clamp(500px,55vw,760px); aspect-ratio:1; opacity:.16; pointer-events:none; }
.pane__jp{ font-size:clamp(17px,2vw,28px); font-weight:900; letter-spacing:.14em; color:rgba(17,17,17,.45); position:relative; }
.pane h3{ margin:clamp(8px,.8vw,10px) 0 clamp(14px,1.7vw,24px); font-size:clamp(42px,5.4vw,76px); letter-spacing:.02em; color:var(--ink); position:relative; }
.pane p{ margin:0; max-width:400px; font-size:clamp(15px,1.35vw,19px); line-height:1.52; color:rgba(17,17,17,.78); text-wrap:pretty; position:relative; }

.xrow{ display:flex; align-items:center; gap:clamp(16px,2.4vw,34px); margin-top:clamp(32px,4.2vw,60px); }
.xrow__mark{ font-size:clamp(56px,8.2vw,116px); color:var(--violet); line-height:1; }
.xrow p{ margin:0; max-width:700px; font-size:clamp(17px,1.85vw,26px); line-height:1.42; text-wrap:pretty; }
@media (max-width:820px){ .xrow{ align-items:flex-start; } .xrow__mark{ line-height:.8; } }

/* ---------- band with warped checkerboard ---------- */
.band{ position:relative; height:clamp(92px,10.3vw,148px); overflow:hidden; }
.band>div{ position:absolute; inset:clamp(-46px,-4.9vw,-70px); }

/* ---------- flavour ---------- */
.duo{ display:flex; gap:clamp(28px,5vw,72px); align-items:center; }
.duo__media{ flex:1 1 420px; min-width:0; max-width:620px; }
.duo__body{ flex:1 1 380px; min-width:0; }
.duo__body h2{ margin-bottom:clamp(18px,2vw,26px); color:var(--wasabi); font-size:clamp(32px,5.6vw,76px); }
.duo p{ margin:0 0 clamp(24px,2.6vw,36px); max-width:470px; font-size:clamp(16px,1.35vw,19px); line-height:1.52; color:var(--mute); text-wrap:pretty; }
.caption{ margin-top:14px; font-size:clamp(9px,.75vw,10px); color:var(--mute); }
@media (max-width:960px){ .duo{ flex-direction:column; align-items:stretch; } .duo__media{ flex:none; max-width:none; order:2; } .duo__body{ flex:none; order:1; } }

.chips{ display:flex; flex-wrap:wrap; gap:9px; max-width:520px; }
.chips span{
  display:inline-flex; align-items:center; min-height:44px; padding:0 17px;
  border:1px solid rgba(255,255,255,.26); border-radius:999px;
  font-size:clamp(9px,.8vw,10px); color:var(--paper);
}
.chips span.is-accent{ border-color:var(--wasabi); color:var(--wasabi); }

/* ---------- statement band ---------- */
.statement{ position:relative; height:clamp(200px,21vw,300px); overflow:hidden; display:flex; align-items:center; justify-content:center; }
.statement img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.statement::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.52); }
.statement div{ position:relative; z-index:2; font-size:clamp(34px,5.1vw,72px); letter-spacing:.03em; text-align:center; padding:0 20px; }

/* ---------- format ---------- */
.format{ position:relative; overflow:hidden; }
.format__deco{ position:absolute; top:clamp(-220px,-28vw,-400px); left:clamp(-190px,-25vw,-360px); width:clamp(500px,62vw,900px); aspect-ratio:1; opacity:.45; pointer-events:none; }
.format__grid{ position:relative; display:flex; gap:clamp(28px,4.4vw,64px); align-items:center; }
.format__body{ flex:1 1 0; min-width:0; }
.format__body h2{ margin-bottom:clamp(18px,2vw,26px); font-size:clamp(32px,5.2vw,72px); }
.format__body p{ margin:0 0 clamp(26px,2.9vw,40px); max-width:460px; font-size:clamp(16px,1.35vw,19px); line-height:1.52; color:var(--mute); text-wrap:pretty; }
.specs{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.16); max-width:460px; }
.specs>div{ background:#000; padding:clamp(18px,1.7vw,22px) clamp(16px,1.9vw,24px); }
.specs dt{ font-size:clamp(9px,.8vw,10px); color:var(--mute); margin:0 0 9px; }
.specs dd{ margin:0; font-size:clamp(19px,1.7vw,21px); color:var(--wasabi); }
.format__shots{ flex:0 0 auto; display:flex; gap:clamp(12px,1.5vw,20px); align-items:flex-end; }
.format__shots img:first-child{ width:clamp(150px,24vw,340px); }
.format__shots img:last-child{ width:clamp(112px,17.5vw,250px); }
@media (max-width:960px){
  .format__grid{ flex-direction:column; align-items:stretch; }
  .format__body{ flex:none; }
  .format__shots{ flex:none; justify-content:flex-start; }
  .specs{ max-width:none; }
  /* stacked: let the shots share the full row instead of staying thumbnail-sized */
  .format__shots img{ width:auto; min-width:0; }
  .format__shots img:first-child{ flex:1.3 1 0; }
  .format__shots img:last-child{ flex:1 1 0; }
}

/* ---------- pattern strip ---------- */
.strip{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); height:clamp(92px,12.5vw,180px); }
.strip>div{ position:relative; overflow:hidden; }
.strip>div>div{ position:absolute; inset:clamp(-26px,-3.2vw,-46px); }

/* ---------- footer ---------- */
.foot{ background:var(--paper); color:var(--ink); padding-top:clamp(46px,5.8vw,84px); padding-bottom:clamp(42px,5vw,72px); }
.foot__lock{ display:flex; align-items:center; gap:clamp(18px,2vw,28px); margin-bottom:clamp(30px,3.6vw,52px); flex-wrap:wrap; }
.foot__lock img{ width:clamp(46px,5vw,72px); }
.foot__name{ font-size:clamp(50px,5.9vw,84px); letter-spacing:.1em; color:var(--ink); }
.foot__jp{ margin-top:10px; font-size:clamp(15px,1.5vw,21px); font-weight:700; letter-spacing:.24em; color:var(--violet); }
.foot__bar{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  padding-top:clamp(22px,2.2vw,32px); border-top:1.5px solid rgba(17,17,17,.18); }
.foot__meta{ display:flex; flex-direction:column; gap:7px; font-size:clamp(11px,.9vw,12px); }
.foot__meta .is-dim{ color:rgba(17,17,17,.45); }
.foot__contact{ display:flex; flex-direction:column; gap:8px; }
.foot__contact-label{ font-size:clamp(9px,.8vw,10px); color:rgba(17,17,17,.45); }
/* the global link colour is wasabi, which is unreadable on the paper footer */
.foot__mail{ font-size:clamp(15px,1.4vw,19px); font-weight:700; letter-spacing:.01em;
  color:var(--ink); border-bottom:2px solid var(--wasabi); padding-bottom:2px; align-self:flex-start; }
.foot__mail:hover{ color:var(--violet); border-bottom-color:var(--violet); }