/* ============================================================
   RIFTFIELD — style.css  (dark field × editorial type)
   ============================================================ */

:root{
  --bg:#000;
  --fg:#fff;
  --dim:rgba(255,255,255,.5);
  --dim2:rgba(255,255,255,.28);
  --line:rgba(255,255,255,.14);
  --ease:cubic-bezier(.16,1,.3,1);
  --pad:clamp(20px,4.5vw,64px);
  --maxw:1560px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:"Archivo",system-ui,sans-serif;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.is-locked{overflow:hidden;height:100vh}

a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul{margin:0}
ul{list-style:none;padding:0}
em{font-style:normal}

.mono{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:11px;letter-spacing:.14em;
}
.note{
  font-family:"JetBrains Mono",monospace;
  font-style:normal;font-size:9px;letter-spacing:.08em;
  text-transform:uppercase;
  color:#ff7a3c;border:1px solid rgba(255,122,60,.4);
  padding:1px 5px;border-radius:2px;margin-left:8px;
  vertical-align:middle;white-space:nowrap;
}

/* ---------- background field ---------- */
#field{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;
  opacity:0;transition:opacity 1.2s var(--ease);
}
#field.on{opacity:1}

.grain{
  position:fixed;inset:-100%;
  z-index:1;pointer-events:none;opacity:.028;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}      20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-3%)}  60%{transform:translate(-2%,-2%)}
  80%{transform:translate(3%,1%)}   100%{transform:translate(0,0)}
}

/* ============================================================
   INTRO
   ============================================================ */
#intro{position:fixed;inset:0;z-index:100;pointer-events:none}
#intro.done{display:none}

.intro-curtain{position:fixed;left:0;width:100%;height:50.2%;background:#000;will-change:transform}
.intro-curtain--t{top:0}
.intro-curtain--b{bottom:0}

.intro-stage{
  position:fixed;inset:0;
  display:flex;align-items:center;justify-content:center;
}
.intro-field{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:center;
  pointer-events:none;
}
.intro-field i{
  display:block;height:1px;width:100%;
  background:linear-gradient(90deg,rgba(255,255,255,.55),rgba(255,255,255,.05) 70%,transparent);
  transform:scaleX(0);transform-origin:0 50%;
}
.intro-logo{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(14px,2.4vw,26px);
  color:#fff;
}
.intro-mark{width:clamp(52px,7vw,84px);height:auto;opacity:0;clip-path:inset(0 50% 0 50%)}
.intro-type{width:clamp(180px,26vw,340px);height:auto;clip-path:inset(0 100% 0 0)}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;width:100%;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(14px,2vw,24px) var(--pad);
  mix-blend-mode:difference;color:#fff;
  opacity:0;transform:translateY(-8px);
}
.nav.in{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}
.nav__mark svg{width:26px;height:auto;transition:transform .5s var(--ease)}
.nav__mark:hover svg{transform:translateX(3px)}
.nav__clock{
  position:absolute;left:50%;transform:translateX(-50%);
  color:rgba(255,255,255,.55);
  font-variant-numeric:tabular-nums;
}
.nav__links{display:flex;gap:clamp(16px,2.4vw,32px)}
.nav__links a{position:relative;padding-bottom:2px}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:100% 50%;
  transition:transform .5s var(--ease);
}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:0 50%}

/* ============================================================
   HERO
   ============================================================ */
main{position:relative;z-index:10}

.hero{
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(90px,12vh,140px) var(--pad) clamp(24px,4vh,44px);
  max-width:var(--maxw);margin:0 auto;width:100%;
}
.hero__meta{
  display:flex;gap:clamp(20px,4vw,56px);
  color:var(--dim);margin-bottom:clamp(20px,3.4vh,40px);
  opacity:0;
}
.hero__title{
  font-family:"Archivo Expanded","Archivo",sans-serif;
  font-weight:800;
  text-transform:uppercase;
}
.hero__title>span{display:block;overflow:hidden}
.hero__title em{display:inline-block;transform:translateY(110%)}
.hero__type{
  display:block;
  width:min(78%,820px);height:auto;
}
.hero__title .l1 em{display:block;line-height:0}
.hero__title .l2{
  margin-top:clamp(14px,2.2vh,26px);
  font-size:clamp(16px,3vw,44px);
  line-height:1;letter-spacing:.02em;
  color:var(--fg);
}

/* ---------- glitch sync : たまに背景のバーストに合わせてロゴが反転 ---------- */
.is-glitch .hero__type{
  fill:rgba(255,255,255,0);
  stroke:#fff;stroke-width:5;
}
.is-glitch .hero__title .l2 em{
  color:transparent;
  -webkit-text-stroke:1px var(--fg);
}
.hero__lede{
  margin-top:clamp(22px,3.6vh,42px);
  font-size:clamp(13px,1.25vw,17px);
  line-height:1.75;color:var(--dim);
  max-width:66ch;opacity:0;transform:translateY(14px);
}
.hero__foot{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:clamp(26px,4.4vh,52px);
  padding-top:clamp(14px,2vh,20px);
  border-top:1px solid rgba(255,255,255,.9);
  color:var(--dim);opacity:0;
}
.hero__clock{font-variant-numeric:tabular-nums}

/* ============================================================
   SECTIONS
   ============================================================ */
.sec{
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(80px,12vw,180px) var(--pad);
  border-top:1px solid var(--line);
}
.sec__head{margin-bottom:clamp(30px,4.4vw,60px)}
.tag{display:block;color:var(--dim);text-transform:uppercase}

/* --- statement --- */
.statement{padding-top:clamp(90px,14vw,200px);padding-bottom:clamp(90px,14vw,200px)}
.statement__txt{
  font-size:clamp(22px,3.4vw,48px);
  font-weight:500;line-height:1.34;letter-spacing:-.01em;
  max-width:26em;
}
.statement__txt em{
  background:var(--fg);color:var(--bg);
  padding:.02em .18em;
}

/* --- services --- */
.svc__item{border-top:1px solid rgba(255,255,255,.55);position:relative;overflow:hidden}
.svc__item:last-child{border-bottom:1px solid rgba(255,255,255,.55)}
.svc__row{
  display:grid;
  grid-template-columns:clamp(70px,9vw,130px) 1fr clamp(180px,24vw,340px);
  align-items:center;gap:clamp(12px,2.4vw,36px);
  min-height:clamp(84px,9vw,128px);
  padding:clamp(18px,2.4vw,30px) 0;
  position:relative;z-index:1;
  transition:color .45s var(--ease),transform .45s var(--ease);
}
.svc__item::before{
  content:"";position:absolute;inset:0;background:var(--fg);
  transform:scaleY(0);transform-origin:50% 100%;
  transition:transform .5s var(--ease);
}
.svc__item:hover::before{transform:scaleY(1);transform-origin:50% 0}
.svc__item:hover .svc__row{color:var(--bg)}
.svc__no{color:inherit;opacity:.55}
.svc__row h3{
  font-family:"Archivo Expanded","Archivo",sans-serif;
  font-weight:700;text-transform:uppercase;
  font-size:clamp(18px,2.6vw,38px);
  line-height:1.12;letter-spacing:-.01em;
  text-wrap:balance;
  transition:transform .45s var(--ease);
}
.svc__item:hover .svc__row h3{transform:translateX(clamp(6px,1vw,16px))}
.svc__desc{
  font-size:clamp(11px,.95vw,13px);
  line-height:1.7;
  color:inherit;opacity:.6;text-align:right;
  justify-self:end;
  padding-right:clamp(10px,1.6vw,26px);
}
.svc__item--etc .svc__row h3{
  color:rgba(255,255,255,.14);
  -webkit-text-stroke:1px var(--fg);
}
.svc__item--etc:hover .svc__row h3{
  color:rgba(0,0,0,.14);
  -webkit-text-stroke:1px var(--bg);
}

/* --- approach --- */
.split{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,3vw,44px);
}
.split__item{
  border-top:1px solid rgba(255,255,255,.55);
  padding-top:clamp(14px,1.8vw,22px);
}
.split__item .mono{color:var(--dim)}
.split__item h4{
  margin-top:.9em;
  font-size:clamp(16px,1.5vw,21px);
  font-weight:600;letter-spacing:-.01em;
}
.split__item p{
  margin-top:.7em;font-size:clamp(12px,1vw,14px);
  line-height:1.8;color:var(--dim);
}

/* --- contact --- */
.sec--contact{padding-bottom:clamp(60px,8vw,120px)}
.contact__mail{
  display:flex;align-items:center;gap:clamp(16px,3vw,48px);
  margin-top:clamp(24px,3.4vw,48px);
  font-family:"Archivo Expanded","Archivo",sans-serif;
  font-weight:800;text-transform:uppercase;
  font-size:clamp(22px,5.6vw,96px);
  line-height:1;letter-spacing:-.02em;
  position:relative;width:max-content;max-width:100%;
}
.contact__mail svg{
  width:clamp(24px,4.4vw,72px);height:auto;flex:none;
  transition:transform .6s var(--ease);
}
.contact__mail:hover svg{transform:translateX(clamp(8px,1.4vw,22px))}
.contact__mail span{position:relative}
.contact__mail span::after{
  content:"";position:absolute;left:0;bottom:-.08em;width:100%;height:3px;
  background:currentColor;transform:scaleX(0);transform-origin:100% 50%;
  transition:transform .7s var(--ease);
}
.contact__mail:hover span::after{transform:scaleX(1);transform-origin:0 50%}
.contact__note{margin-top:clamp(18px,2.4vw,30px);color:var(--dim)}

/* --- footer --- */
.foot{
  position:relative;z-index:10;
  display:flex;justify-content:space-between;gap:16px;
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(22px,3vw,36px) var(--pad);
  color:var(--dim2);border-top:1px solid var(--line);
  text-transform:uppercase;
}
.foot span{font-variant-numeric:tabular-nums}

/* ---------- text legibility over the field ----------
   文字の後ろに黒のソフトグローを敷いて、背景の線と
   重なっても読めるようにする */
.hero__title em,
.hero__meta,
.hero__lede,
.hero__foot,
.statement__txt,
.tag,
.svc__row,
.split__item,
.contact__mail,
.contact__note,
.foot{
  text-shadow:
    0 0 3px rgba(0,0,0,.95),
    0 0 10px rgba(0,0,0,.85),
    0 0 24px rgba(0,0,0,.65),
    0 0 48px rgba(0,0,0,.45);
}
.svc__item:hover .svc__row{text-shadow:none}
.statement__txt em{text-shadow:none}

/* ---------- bg switch (dev only) ---------- */
.bgswitch{
  position:fixed;right:16px;bottom:16px;z-index:60;
  display:flex;align-items:center;gap:8px;
  color:var(--dim2);
}
.bgswitch button{
  all:unset;cursor:pointer;
  font:inherit;letter-spacing:inherit;
  color:var(--dim2);
  border:1px solid var(--line);
  padding:4px 8px;border-radius:2px;
  transition:color .3s,border-color .3s;
}
.bgswitch button:hover{color:var(--fg)}
.bgswitch button.on{color:var(--bg);background:var(--fg);border-color:var(--fg)}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(24px)}
.reveal.in{
  opacity:1;transform:none;
  transition:opacity 1s var(--ease),transform 1s var(--ease);
}

/* ---------- responsive ---------- */
@media (max-width:820px){
  .nav__clock{display:none}
  .svc__row{grid-template-columns:clamp(54px,12vw,80px) 1fr;grid-auto-rows:auto}
  .svc__desc{grid-column:2;text-align:left;margin-top:6px}
  .split{grid-template-columns:1fr}
  .hero__meta{flex-wrap:wrap;gap:14px}
  .pcbr{display:none}
  .foot span:nth-child(2){display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .reveal,.hero__meta,.hero__lede,.hero__foot{opacity:1;transform:none}
  .hero__title em,.hero__mark{transform:none}
}