/* ── Okano Softworks ─────────────────────────────────────────────── */
:root{
  --bg:#000;
  --panel:#0b0b0e;
  --line:#26262c;
  --txt:#eceff1;
  --dim:#9aa0a8;
  --red:#e8141c;
  --red-hot:#ff4a51;
  --head:"Chakra Petch",sans-serif;
  --body:"Rajdhani",sans-serif;
  --cut-shape:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px));
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--txt);
  font:500 19px/1.55 var(--body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.lock{overflow:hidden}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.014) 0 1px,transparent 1px 96px);
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}

/* ── Scrollbar, blade red on black ──────────────────────────────── */
html{scrollbar-color:var(--red) #050506;scrollbar-width:thin}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:#050506}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#7a1519,var(--red) 35%,var(--red) 65%,#7a1519);
  border:2px solid #050506;
}
::-webkit-scrollbar-thumb:hover{background:var(--red-hot)}
::-webkit-scrollbar-corner{background:#050506}

/* ── Intro: the logo cut out by a blade ─────────────────────────── */
.intro{
  position:fixed;inset:0;z-index:100;background:#000;
  display:flex;align-items:center;justify-content:center;
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
  transition:clip-path .55s cubic-bezier(.75,0,.25,1),opacity .55s ease;
}
.intro--out{
  clip-path:polygon(0 0,0 0,-60% 100%,-60% 100%);
  opacity:0;pointer-events:none;
}
html.no-intro .intro{display:none}
.intro__stage{
  position:relative;width:min(88vw,780px);aspect-ratio:3/2;
}
.intro.play .intro__stage{animation:stagepulse .45s ease 1.65s both}
@keyframes stagepulse{0%{filter:brightness(1)}25%{filter:brightness(1.8)}100%{filter:brightness(1)}}

.cut{position:absolute;inset:0;opacity:0}
.cut img{width:100%;height:100%;object-fit:contain;mix-blend-mode:screen}
.cut--1{clip-path:polygon(0 0,100% 0,100% 30%,0 55%)}
.cut--2{clip-path:polygon(0 55%,100% 30%,100% 55%,0 80%)}
.cut--3{clip-path:polygon(0 80%,100% 55%,100% 100%,0 100%)}
.intro.play .cut--1{animation:cutin1 .3s cubic-bezier(.2,.9,.3,1) .42s both}
.intro.play .cut--2{animation:cutin2 .3s cubic-bezier(.2,.9,.3,1) .87s both}
.intro.play .cut--3{animation:cutin3 .3s cubic-bezier(.2,.9,.3,1) 1.32s both}
@keyframes cutin1{0%{opacity:0;transform:translate(-28px,-16px)}30%{opacity:1}100%{opacity:1;transform:none}}
@keyframes cutin2{0%{opacity:0;transform:translate(30px,12px)}30%{opacity:1}100%{opacity:1;transform:none}}
@keyframes cutin3{0%{opacity:0;transform:translate(-22px,14px)}30%{opacity:1}100%{opacity:1;transform:none}}

.slash{
  position:absolute;left:50%;width:170%;height:3px;margin-left:-85%;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9) 42%,#fff 50%,rgba(255,255,255,.9) 58%,transparent);
  box-shadow:0 0 14px rgba(255,255,255,.85),0 0 46px rgba(232,20,28,.55);
}
.slash--1{top:42.5%}
.slash--2{top:67.5%}
.slash--3{top:88%}
.intro.play .slash--1{animation:sweepR .26s linear .3s both}
.intro.play .slash--2{animation:sweepL .26s linear .75s both}
.intro.play .slash--3{animation:sweepR3 .26s linear 1.2s both}
@keyframes sweepR{0%{opacity:0;transform:rotate(-9.5deg) translateX(-55%)}12%{opacity:1}88%{opacity:1}100%{opacity:0;transform:rotate(-9.5deg) translateX(55%)}}
@keyframes sweepL{0%{opacity:0;transform:rotate(-9.5deg) translateX(55%)}12%{opacity:1}88%{opacity:1}100%{opacity:0;transform:rotate(-9.5deg) translateX(-55%)}}
@keyframes sweepR3{0%{opacity:0;transform:rotate(-4deg) translateX(-55%)}12%{opacity:1}88%{opacity:1}100%{opacity:0;transform:rotate(-4deg) translateX(55%)}}

.glint{
  position:absolute;top:-20%;left:-55%;width:40%;height:140%;opacity:0;
  background:linear-gradient(105deg,transparent,rgba(232,20,28,.3),transparent);
  transform:skewX(-18deg);mix-blend-mode:screen;
}
.intro.play .glint{animation:glintsweep .5s ease-in-out 1.7s both}
@keyframes glintsweep{0%{opacity:0;transform:skewX(-18deg) translateX(0)}12%{opacity:1}88%{opacity:1}100%{opacity:0;transform:skewX(-18deg) translateX(400%)}}

.intro__skip{
  position:absolute;right:24px;bottom:22px;cursor:pointer;
  background:none;border:1px solid var(--line);color:var(--dim);
  font:600 13px var(--body);letter-spacing:.22em;text-transform:uppercase;
  padding:7px 16px;
}
.intro__skip:hover{color:var(--txt);border-color:var(--dim)}

/* ── Reveal-on-scroll (gated behind the intro on first visit) ───── */
.rise{opacity:0;transform:translateY(18px);
  transition:opacity .7s ease var(--d,0s),transform .7s cubic-bezier(.2,.8,.2,1) var(--d,0s)}
.rise.in{opacity:1;transform:none}
html:not(.no-intro):not(.intro-done) main .rise{transition:none;opacity:0;transform:translateY(18px)}

/* ── Top bar ────────────────────────────────────────────────────── */
.top{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px clamp(16px,4vw,44px);
  background:rgba(0,0,0,.72);backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(38,38,44,.6);
}
.top__mark{font:700 17px var(--head);letter-spacing:.14em}
.top__mark span{color:var(--dim);font-weight:500}
.top__nav{display:flex;gap:clamp(14px,3vw,34px)}
.top__nav a{
  font:600 14px var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--dim);
  padding:4px 2px;border-bottom:2px solid transparent;transition:color .2s,border-color .2s;
}
.top__nav a:hover{color:var(--txt);border-color:var(--red)}

/* ── Hero ───────────────────────────────────────────────────────── */
.hero{
  position:relative;min-height:96vh;z-index:1;
  display:flex;align-items:center;justify-content:center;
  padding:110px 16px 60px;text-align:center;
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 45% at 50% 62%,rgba(232,20,28,.09),transparent 70%);
}
.hero__inner{position:relative}
.hero__logo{width:min(84vw,760px);height:auto;margin:0 auto;
  filter:drop-shadow(0 0 34px rgba(255,255,255,.14))}
.hero__tag{
  font:700 clamp(22px,3.4vw,32px) var(--head);letter-spacing:.24em;text-transform:uppercase;
  margin-top:44px;
}
.hero__sub{color:var(--dim);font-size:clamp(18px,2.2vw,22px);margin-top:40px;letter-spacing:.06em}
.hero__cta{
  display:inline-block;margin-top:38px;padding:13px 34px;
  font:600 15px var(--body);letter-spacing:.26em;text-transform:uppercase;
  color:var(--txt);background:transparent;border:1px solid var(--red);
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
  transition:background .25s,color .25s;
}
.hero__cta:hover{background:var(--red);color:#fff}
.hero__floor{
  position:absolute;left:8%;right:8%;bottom:2.5vh;height:1px;
  background:linear-gradient(90deg,transparent,rgba(232,20,28,.55),transparent);
  box-shadow:0 0 18px rgba(232,20,28,.35);
  transform:rotate(-1.1deg);
}

/* ── Works ──────────────────────────────────────────────────────── */
.works{position:relative;z-index:1;max-width:1120px;margin:0 auto;padding:90px 16px 30px}
.works__title,.about__title{
  font:700 clamp(26px,3.6vw,38px) var(--head);letter-spacing:.3em;
  display:flex;align-items:center;margin-bottom:44px;
}
.tick{display:inline-block;width:28px;height:15px;background:var(--red);
  transform:skewX(-24deg);margin-right:18px;flex:none}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}

.card{
  position:relative;display:block;clip-path:var(--cut-shape);
  background:var(--line);padding:1px;
  transform:translateY(0);transition:transform .3s ease,background .4s ease;
}
.card::before{
  content:"";position:absolute;inset:1px;background:var(--panel);
  clip-path:var(--cut-shape);
}
.card:hover{
  transform:translateY(-5px);
  background:linear-gradient(115deg,var(--line),var(--red) 45%,var(--line) 72%);
}
.card__head,.card__desc{position:relative;z-index:1}
.card__head{display:flex;align-items:center;gap:20px;padding:28px 28px 0}
.card__desc{padding:18px 28px 44px;color:var(--dim);font-size:18px}
.card__open{
  position:absolute;right:20px;bottom:14px;z-index:1;
  font:600 12px var(--body);letter-spacing:.24em;text-transform:uppercase;
  color:var(--dim);transition:color .25s;
}
.card:hover .card__open{color:var(--red-hot)}
.card--minor .card__head{padding:22px 24px 0;gap:16px}
.card--minor .card__emblem{width:44px;height:44px}
.card--minor .card__name{font-size:20px;margin-bottom:6px}
.card--minor .card__desc{padding:14px 24px 40px;font-size:16.5px}
.card--mini .card__head{padding:14px 20px 0;gap:13px}
.card--mini .card__head .card__name{font-size:17px;margin-bottom:4px}
.card--mini .card__emblem{width:34px;height:34px}
.card--mini .card__desc{padding:8px 20px 30px;font-size:14.5px}
.card--mini .chip{font-size:10px;padding:2px 7px;letter-spacing:.16em}
.card--mini .card__open{font-size:10.5px;right:16px;bottom:10px}
.minis{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:10px}
.mini{background:var(--panel);border:1px solid var(--line);padding:11px 14px;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px))}
.mini b{display:block;font:700 13.5px var(--head);letter-spacing:.04em;color:var(--txt)}
.mini span{display:block;color:var(--dim);font-size:12.5px;line-height:1.45;margin-top:3px}
.card__name{font:700 24px var(--head);letter-spacing:.06em;margin-bottom:7px}
.card__emblem{width:52px;height:52px;flex:none;color:var(--dim)}
.card__emblem .acc{stroke:var(--red);fill:none}
.chip{
  display:inline-block;border:1px solid #3a3a42;color:var(--dim);
  font:600 11px var(--body);letter-spacing:.2em;text-transform:uppercase;
  padding:3px 9px;vertical-align:middle;
}
.chip--live{color:var(--red-hot);border-color:#7a1519}
.card__glint{position:absolute;inset:1px;z-index:1;overflow:hidden;pointer-events:none;
  clip-path:var(--cut-shape)}
.card__glint::after{
  content:"";position:absolute;top:-30%;left:-30%;width:26%;height:160%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.07),transparent);
  transform:skewX(-18deg) translateX(-160%);
}
.card:hover .card__glint::after{transition:transform .7s ease;transform:skewX(-18deg) translateX(560%)}

/* ── Card emblems come alive as they scroll in ──────────────────── */
.card.in .card__name{animation:name-form .9s cubic-bezier(.2,.8,.2,1) calc(var(--d,0s) + .25s) both}
@keyframes name-form{from{opacity:0;letter-spacing:.34em;filter:blur(5px)}to{opacity:1;letter-spacing:.06em;filter:blur(0)}}

/* Wraith: the ghost forms like the client's boot screen */
.card--wraith .ghost{stroke-dasharray:115}
.card--wraith.in .ghost{animation:wr-draw 1.1s ease-out calc(var(--d,0s) + .35s) both}
@keyframes wr-draw{from{stroke-dashoffset:115;opacity:.15}to{stroke-dashoffset:0;opacity:1}}
.card--wraith.in .eye{animation:wr-eyes .6s steps(2,end) calc(var(--d,0s) + 1.3s) both}
@keyframes wr-eyes{0%{opacity:0}55%{opacity:1}75%{opacity:.2}100%{opacity:1}}
.card--wraith:hover .eye{filter:drop-shadow(0 0 3px var(--red-hot))}

/* KingsBlade: the swords swing in and clash */
.sword-anim{transform-box:view-box;transform-origin:50% 42.3%}
.card--kb.in .sword-anim--l{animation:kb-swing-l .5s cubic-bezier(.5,0,.3,1) calc(var(--d,0s) + .4s) both}
.card--kb.in .sword-anim--r{animation:kb-swing-r .5s cubic-bezier(.5,0,.3,1) calc(var(--d,0s) + .4s) both}
@keyframes kb-swing-l{from{transform:rotate(-34deg);opacity:0}35%{opacity:1}to{transform:rotate(0deg);opacity:1}}
@keyframes kb-swing-r{from{transform:rotate(34deg);opacity:0}35%{opacity:1}to{transform:rotate(0deg);opacity:1}}
.card--kb .clash{opacity:0;transform-box:fill-box;transform-origin:center}
.card--kb.in .clash{animation:kb-clash .4s ease-out calc(var(--d,0s) + .82s) both}
@keyframes kb-clash{0%{opacity:0;transform:scale(.3)}35%{opacity:1;transform:scale(1.15)}100%{opacity:0;transform:scale(1.5)}}
.card--kb.in .card__emblem{animation:kb-shake .22s linear calc(var(--d,0s) + .84s)}
@keyframes kb-shake{25%{transform:translate(1px,-.5px)}50%{transform:translate(-1px,.5px)}75%{transform:translate(.5px,0)}}

/* ShogunsBlade: the torii is raised */
.torii-pillars,.torii-nuki,.torii-kasagi{transform-box:view-box}
.card--sb.in .torii-pillars{animation:sb-rise .45s ease calc(var(--d,0s) + .35s) both}
@keyframes sb-rise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.card--sb.in .torii-nuki{animation:sb-beam .35s ease calc(var(--d,0s) + .7s) both}
@keyframes sb-beam{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.card--sb.in .torii-kasagi{animation:sb-beam2 .45s cubic-bezier(.2,.9,.3,1.3) calc(var(--d,0s) + .9s) both}
@keyframes sb-beam2{from{opacity:0;transform:translateY(-9px)}to{opacity:1;transform:none}}
.card--sb.in .torii-strut{animation:sb-fadein .3s ease calc(var(--d,0s) + 1.2s) both}
@keyframes sb-fadein{from{opacity:0}to{opacity:1}}

/* Bedrock Vault: the vault draws itself and the lock drops in */
.card--bv .cube-shell{stroke-dasharray:125}
.card--bv.in .cube-shell{animation:bv-draw 1s ease-out calc(var(--d,0s) + .35s) both}
@keyframes bv-draw{from{stroke-dashoffset:125;opacity:.15}to{stroke-dashoffset:0;opacity:1}}
.card--bv.in .cube-inner{animation:sb-fadein .5s ease calc(var(--d,0s) + 1.1s) both}
.card--bv .cube-key{transform-box:fill-box;transform-origin:center}
.card--bv.in .cube-key{animation:bv-key .45s cubic-bezier(.2,.9,.3,1.4) calc(var(--d,0s) + 1.35s) both}
@keyframes bv-key{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}

/* ── About / footer ─────────────────────────────────────────────── */
.about{position:relative;z-index:1;max-width:1120px;margin:0 auto;padding:80px 16px 110px}
.about__inner p{max-width:760px;color:var(--dim);font-size:clamp(18px,2vw,21px)}
.foot{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding:26px clamp(16px,4vw,44px);
  color:var(--dim);font-size:15px;letter-spacing:.06em;
}
.foot a:hover{color:var(--txt)}

/* ── Contact ────────────────────────────────────────────────────── */
.contact{position:relative;z-index:1;max-width:1120px;margin:0 auto;padding:10px 16px 110px}
.contact--page{padding-top:130px;min-height:calc(100vh - 320px)}
.contact__title{font:700 clamp(26px,3.6vw,38px) var(--head);letter-spacing:.3em;
  display:flex;align-items:center;margin-bottom:16px}
.contact__lede{color:var(--dim);font-size:clamp(17px,2vw,20px);margin:0 0 34px}
.form{max-width:760px;display:grid;gap:22px}
.form label{display:block;font:600 13px var(--body);letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);margin-bottom:8px}
.form__grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form input[type=text],.form input[type=email],.form textarea{
  width:100%;box-sizing:border-box;background:var(--panel);border:1px solid var(--line);
  color:var(--txt);font:500 17px var(--body);padding:12px 14px;letter-spacing:.03em;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px))}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--red)}
.form textarea{resize:vertical;min-height:130px}
.form fieldset{border:0;margin:0;padding:0}
.form legend{font:600 13px var(--body);letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);margin-bottom:10px;padding:0}
.form__about{display:flex;flex-wrap:wrap;gap:10px 22px}
.form__about label{display:flex;align-items:center;gap:8px;margin:0;
  font:500 16px var(--body);letter-spacing:.03em;text-transform:none;color:#c6ccd2;cursor:pointer}
.form__about input{accent-color:var(--red);width:16px;height:16px}
.form__hp{position:absolute;left:-9999px;top:-9999px}
.form__actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.form__send{cursor:pointer;border:1px solid var(--red);background:var(--red);color:#fff;
  font:600 15px var(--body);letter-spacing:.26em;text-transform:uppercase;padding:13px 38px;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
  transition:background .2s,border-color .2s}
.form__send:hover{background:var(--red-hot);border-color:var(--red-hot)}
.form__send:disabled{opacity:.6;cursor:default}
.form__status{margin:0;font:500 16px var(--body);color:var(--dim)}
.form__status.is-ok{color:#7fd39a}
.form__status.is-err{color:var(--red-hot)}

/* ── Small screens ──────────────────────────────────────────────── */
@media (max-width:760px){
  .grid{grid-template-columns:1fr}
  .form__grid{grid-template-columns:1fr}
  .top__nav{gap:16px}
  .top__nav a{font-size:12.5px;letter-spacing:.12em}
  .top__mark{font-size:15px}
  .card__head{padding:22px 20px 0;gap:15px}
  .card__desc{padding:15px 20px 24px}
  .hero{min-height:88vh}
}

/* ── Reduced motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .rise{transition:none;opacity:1;transform:none}
  .card,.card__glint::after,.hero__cta{transition:none}
  .card svg *,.card .card__name,.card__emblem{animation:none !important}
}