:root{
  --bg:#050816;
  --card:#0b1020;
  --text:#ffffff;
  --muted:#9ba3b4;
  --accent:#00e5ff;
  --accent2:#7a5cff;
  --accent-rgb:0,229,255;
  --accent2-rgb:122,92,255;
  --orb1:#00e5ff;
  --orb2:#7a5cff;
  --glow-color:rgba(0,229,255,.18);
  --cursor-border:rgba(255,255,255,.8);
  --btn-primary-from:#00e5ff;
  --btn-primary-to:#0077ff;
  --btn-primary-color:#000000;
  --eyebrow-bg:rgba(0,229,255,.08);
  --eyebrow-border:rgba(0,229,255,.14);
  --note-border:rgba(255,255,255,.05);
  --meta-dot:rgba(0,229,255,.8);
  --meta-dot-shadow:rgba(0,229,255,.6);
  --heading-from:#ffffff;
  --heading-to:#00e5ff;
  --loader-ring-color:#00e5ff;
  --loader-bg-top:rgba(0,229,255,.15);
  --loader-bg-bottom:rgba(122,92,255,.15);
  --transition-glow-from:rgba(0,229,255,.35);
  --transition-glow-mid:rgba(0,229,255,.08);
  --sakura-display:none;
  --hex-display:block;
}

body.anime-mode{
  --bg:#0a0414;
  --card:#130a1e;
  --text:#f5e6ff;
  --muted:#a89bc2;
  --accent:#c084fc;
  --accent2:#f59e0b;
  --accent-rgb:192,132,252;
  --accent2-rgb:245,158,11;
  --orb1:#7c3aed;
  --orb2:#db2777;
  --glow-color:rgba(192,132,252,.22);
  --cursor-border:rgba(245,158,11,.9);
  --btn-primary-from:#a855f7;
  --btn-primary-to:#7c3aed;
  --btn-primary-color:#ffffff;
  --eyebrow-bg:rgba(192,132,252,.1);
  --eyebrow-border:rgba(192,132,252,.2);
  --note-border:rgba(192,132,252,.12);
  --meta-dot:rgba(245,158,11,.9);
  --meta-dot-shadow:rgba(245,158,11,.6);
  --heading-from:#f5e6ff;
  --heading-to:#f59e0b;
  --loader-ring-color:#c084fc;
  --loader-bg-top:rgba(192,132,252,.18);
  --loader-bg-bottom:rgba(219,39,119,.15);
  --transition-glow-from:rgba(192,132,252,.4);
  --transition-glow-mid:rgba(192,132,252,.1);
  --sakura-display:block;
  --hex-display:none;
}

/* =============================================
   MODE TRANSITION OVERLAY
============================================= */
.mode-transition-overlay{
  position:fixed;
  inset:0;
  z-index:99998;
  pointer-events:none;
  opacity:0;
}

/* ROBOT→ANIME: shimmer sweep */
.shimmer-sweep{
  position:fixed;
  inset:0;
  z-index:99998;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(
    105deg,
    transparent 0%,
    transparent 28%,
    rgba(192,132,252,.06) 36%,
    rgba(220,160,255,.20) 42%,
    rgba(255,255,255,.36) 47%,
    rgba(255,230,180,.22) 52%,
    rgba(245,158,11,.10) 57%,
    rgba(192,132,252,.05) 64%,
    transparent 72%,
    transparent 100%
  );
  background-size:250% 100%;
  background-position:130% 0;
}

.shimmer-sweep.active{
  animation:shimmerSweep .8s cubic-bezier(.3,0,.2,1) forwards;
}

@keyframes shimmerSweep{
  0%  { opacity:0; background-position:130% 0; }
  6%  { opacity:1; }
  100%{ opacity:0; background-position:-30% 0; }
}

/* ANIME→ROBOT: hologram scan wipe */
.mode-transition-overlay.scan-out{
  animation:scanOutAnim .7s ease-in-out forwards;
}

@keyframes scanOutAnim{
  0%  { opacity:0; background:linear-gradient(180deg, transparent 0%, rgba(0,229,255,.15) 1%, transparent 2%); background-size:100% 200%; background-position:0 100%; }
  15% { opacity:1; }
  50% { opacity:1; background:linear-gradient(180deg, transparent 0%, rgba(0,229,255,.2) 1%, transparent 2%); background-size:100% 200%; background-position:0 0%; }
  70% { opacity:1; background:rgba(0,229,255,.04); }
  85% { opacity:1; background:rgba(5,8,22,.85); }
  100%{ opacity:0; background:transparent; }
}

/* Scan line that travels during ANIME→ROBOT */
.scan-line{
  position:fixed;
  left:0; right:0;
  height:3px;
  background:linear-gradient(90deg, transparent, rgba(0,229,255,.9) 30%, rgba(0,229,255,1) 50%, rgba(0,229,255,.9) 70%, transparent);
  box-shadow:0 0 20px rgba(0,229,255,.8), 0 0 60px rgba(0,229,255,.4);
  z-index:99999;
  opacity:0;
  top:0;
}

.scan-line.active{
  animation:scanLineAnim .7s ease-in-out forwards;
}

@keyframes scanLineAnim{
  0%  { top:0; opacity:0; }
  10% { opacity:1; }
  90% { opacity:1; top:100vh; }
  100%{ top:100vh; opacity:0; }
}

/* =============================================
   PAGE TRANSITION (portfolio button)
============================================= */
.page-transition{
  position:fixed;
  inset:0;
  background:radial-gradient(circle at center, rgba(var(--accent-rgb),.12), rgba(5,8,22,1) 60%);
  backdrop-filter:blur(20px);
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  z-index:99999;
  opacity:0;
  visibility:hidden;
  transition:opacity .8s ease, visibility .8s ease;
}
.page-transition.active{ opacity:1; visibility:visible; }
.transition-glow{
  width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle, var(--transition-glow-from), var(--transition-glow-mid), transparent 70%);
  filter:blur(40px);
  animation:portalPulse 1.5s infinite ease-in-out;
}
.transition-text{
  margin-top:40px;letter-spacing:6px;font-size:13px;
  color:rgba(255,255,255,.7);animation:flicker 1.2s infinite;
}
@keyframes portalPulse{
  0%{ transform:scale(.8);opacity:.5; }
  50%{ transform:scale(1.2);opacity:1; }
  100%{ transform:scale(.8);opacity:.5; }
}
@keyframes flicker{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }

/* =============================================
   RESET
============================================= */
*{ margin:0;padding:0;box-sizing:border-box; }
body{
  font-family:'Inter',sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
  overflow-y:auto;
  transition:background .6s ease, color .6s ease;
}

/* =============================================
   LOADER
============================================= */
.loader{
  position:fixed;inset:0;z-index:9999;
  background:radial-gradient(circle at top, var(--loader-bg-top), transparent 30%),
             radial-gradient(circle at bottom, var(--loader-bg-bottom), transparent 30%),
             var(--bg);
  display:flex;justify-content:center;align-items:center;flex-direction:column;
  animation:loaderOut 1s ease forwards;animation-delay:3s;
}
.loader-ring{
  width:130px;height:130px;border-radius:50%;
  border:2px solid rgba(255,255,255,.08);
  border-top:2px solid var(--accent);
  animation:spin 1s linear infinite;position:relative;
}
.loader-ring::before{
  content:'';position:absolute;inset:-20px;border-radius:50%;
  border:1px solid rgba(var(--accent-rgb),.15);
  animation:pulse 2s infinite;
}
.loader-text{ margin-top:30px;letter-spacing:6px;font-size:13px;color:rgba(255,255,255,.7); }
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes pulse{
  0%{ transform:scale(.8);opacity:1; }
  100%{ transform:scale(1.3);opacity:0; }
}
@keyframes loaderOut{ to{ opacity:0;visibility:hidden; } }

/* =============================================
   BACKGROUND ORBS
============================================= */
.bg{ position:fixed;inset:0;overflow:hidden;z-index:-1; }
.orb{ position:absolute;border-radius:50%;filter:blur(90px);opacity:.35;transition:background 1s ease; }
.orb1{ width:400px;height:400px;background:var(--orb1);top:-100px;left:-100px;animation:float1 10s ease-in-out infinite; }
.orb2{ width:350px;height:350px;background:var(--orb2);bottom:-100px;right:-100px;animation:float2 12s ease-in-out infinite; }
@keyframes float1{ 50%{ transform:translateY(40px) translateX(20px); } }
@keyframes float2{ 50%{ transform:translateY(-40px) translateX(-20px); } }

/* =============================================
   HEXAGON BACKGROUND (robot mode)
============================================= */
.hex-canvas{
  display:var(--hex-display);
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:1;
}

/* =============================================
   SAKURA PETALS (anime mode only)
============================================= */
.sakura-container{
  display:var(--sakura-display);
  position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;
}
.petal{ position:absolute;top:-40px;width:10px;height:10px;opacity:0; }
.petal svg{ width:100%;height:100%; }
.petal:nth-child(1)  { left:5%;   animation:sakuraFall 12s 0s   infinite linear; }
.petal:nth-child(2)  { left:12%;  animation:sakuraFall  9s 1.5s infinite linear; width:14px;height:14px; }
.petal:nth-child(3)  { left:22%;  animation:sakuraFall 14s 0.8s infinite linear; width:8px;height:8px; }
.petal:nth-child(4)  { left:35%;  animation:sakuraFall 11s 3s   infinite linear; width:12px;height:12px; }
.petal:nth-child(5)  { left:45%;  animation:sakuraFall 13s 0.3s infinite linear; }
.petal:nth-child(6)  { left:55%;  animation:sakuraFall  8s 2s   infinite linear; width:7px;height:7px; }
.petal:nth-child(7)  { left:65%;  animation:sakuraFall 15s 1s   infinite linear; width:13px;height:13px; }
.petal:nth-child(8)  { left:72%;  animation:sakuraFall 10s 4s   infinite linear; }
.petal:nth-child(9)  { left:80%;  animation:sakuraFall 12s 2.5s infinite linear; width:9px;height:9px; }
.petal:nth-child(10) { left:88%;  animation:sakuraFall  9s 0.6s infinite linear; width:11px;height:11px; }
.petal:nth-child(11) { left:93%;  animation:sakuraFall 14s 3.5s infinite linear; width:8px;height:8px; }
.petal:nth-child(12) { left:18%;  animation:sakuraFall 11s 1.8s infinite linear; width:15px;height:15px; }
@keyframes sakuraFall{
  0%{ transform:translateY(0) translateX(0) rotate(0deg);opacity:0; }
  5%{ opacity:.85; }
  85%{ opacity:.7; }
  100%{ transform:translateY(110vh) translateX(80px) rotate(540deg);opacity:0; }
}

/* =============================================
   KANJI STRIP (anime mode)
============================================= */
.kanji-strip{
  display:none;position:fixed;left:18px;top:50%;transform:translateY(-50%);
  writing-mode:vertical-rl;font-family:'Noto Serif JP',serif;font-size:11px;
  letter-spacing:6px;color:rgba(192,132,252,.18);z-index:1;
  pointer-events:none;user-select:none;
}
body.anime-mode .kanji-strip{ display:block; }

/* =============================================
   MODE TOGGLE SWITCH
============================================= */
.mode-toggle{
  position:fixed;top:22px;right:22px;z-index:10000;
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(20px);padding:8px 14px 8px 10px;border-radius:999px;
  cursor:pointer;transition:border-color .4s ease, background .4s ease, box-shadow .4s ease;
  user-select:none;
}
.mode-toggle:hover{ border-color:rgba(var(--accent-rgb),.4);box-shadow:0 0 20px rgba(var(--accent-rgb),.12); }
.mode-icon{ font-size:16px;line-height:1;transition:transform .4s ease; }
.toggle-track{
  width:42px;height:22px;border-radius:999px;
  background:rgba(var(--accent-rgb),.15);border:1px solid rgba(var(--accent-rgb),.3);
  position:relative;transition:background .5s ease, border-color .5s ease;flex-shrink:0;
}
.toggle-thumb{
  position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 8px rgba(var(--accent-rgb),.8);
  transition:left .4s cubic-bezier(.34,1.56,.64,1), background .5s ease, box-shadow .5s ease;
}
body.anime-mode .toggle-thumb{ left:23px; }
.mode-label{
  font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
  color:rgba(255,255,255,.6);font-weight:600;min-width:52px;transition:color .4s ease;
}

/* =============================================
   HERO
============================================= */
.hero{
  width:100%;min-height:100vh;
  display:flex;justify-content:center;align-items:center;
  padding:40px 40px 56px;position:relative;z-index:1;
}
.hero-content{
  width:100%;max-width:1180px;
  display:grid;grid-template-columns:1fr 420px;align-items:center;gap:44px;
}
.left{ max-width:620px; }

/* =============================================
   EYEBROW BADGE
============================================= */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 16px;border-radius:999px;
  background:var(--eyebrow-bg);border:1px solid var(--eyebrow-border);
  color:var(--accent);font-size:12px;letter-spacing:2px;text-transform:uppercase;
  margin-bottom:26px;transition:background .6s ease, border-color .6s ease, color .6s ease;
}
.eyebrow::before{
  content:'';width:8px;height:8px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 12px rgba(var(--accent-rgb),.8);
  transition:background .6s ease, box-shadow .6s ease;
}
body.anime-mode .eyebrow::before{
  content:'🌸';background:none;box-shadow:none;width:auto;height:auto;font-size:13px;
}

/* =============================================
   HEADING
============================================= */
.left h1{
  font-size:78px;font-weight:800;line-height:.95;margin-bottom:18px;
  background:linear-gradient(90deg, var(--heading-from), var(--heading-to));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  transition:background 0s;
}
body.anime-mode .left h1{
  font-family:'Cinzel',serif;font-size:72px;letter-spacing:4px;text-shadow:none;
}

/* =============================================
   ROLE / DESCRIPTION / TYPING
============================================= */
.role{
  font-size:16px;color:#d4deed;letter-spacing:3px;margin-bottom:22px;
  text-transform:uppercase;transition:color .6s ease;
}
body.anime-mode .role{
  color:rgba(245,158,11,.8);font-family:'Noto Serif JP',serif;
  letter-spacing:4px;font-size:14px;
}
.description{
  color:var(--muted);font-size:16px;line-height:1.9;margin-bottom:24px;
  max-width:560px;transition:color .6s ease;
}
.typing{ font-size:24px;font-weight:600;min-height:40px;margin-bottom:24px; }
.typing span{ color:var(--accent);transition:color .6s ease; }

/* =============================================
   BUTTONS
============================================= */
.buttons{ display:flex;gap:20px;margin-bottom:22px;flex-wrap:wrap; }
.btn{ padding:16px 28px;border-radius:14px;text-decoration:none;font-size:14px;font-weight:600;transition:.3s ease; }
.btn-primary{
  background:linear-gradient(135deg, var(--btn-primary-from), var(--btn-primary-to));
  color:var(--btn-primary-color);
  transition:background .6s ease, color .6s ease, transform .3s ease, box-shadow .3s ease;
}
.btn-primary:hover{ transform:translateY(-4px);box-shadow:0 10px 30px rgba(var(--accent-rgb),.28); }
.btn-secondary{
  border:1px solid rgba(255,255,255,.1);color:white;
  background:rgba(255,255,255,.03);backdrop-filter:blur(20px);
}
.btn-secondary:hover{ border-color:rgba(var(--accent-rgb),.4);transform:translateY(-4px); }
body.anime-mode .btn-secondary{ border-color:rgba(245,158,11,.2); }
body.anime-mode .btn-secondary:hover{ border-color:rgba(245,158,11,.6);box-shadow:0 0 16px rgba(245,158,11,.15); }

/* =============================================
   META ROW
============================================= */
.meta-row{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  color:var(--muted);font-size:14px;max-width:520px;
}
.meta-row span{ display:flex;align-items:center;gap:10px; }
.meta-row span::before{
  content:'';width:7px;height:7px;border-radius:50%;
  background:var(--meta-dot);box-shadow:0 0 10px var(--meta-dot-shadow);
  transition:background .6s ease, box-shadow .6s ease;
}

/* =============================================
   INTRO NOTE
============================================= */
.intro-note{
  padding:22px 24px;border-radius:24px;
  background:rgba(255,255,255,.03);border:1px solid var(--note-border);
  backdrop-filter:blur(20px);margin-top:22px;transition:border-color .6s ease;
}
.intro-note strong{
  display:block;font-size:14px;letter-spacing:2px;text-transform:uppercase;
  color:var(--accent);margin-bottom:10px;transition:color .6s ease;
}
body.anime-mode .intro-note strong{ font-family:'Noto Serif JP',serif;letter-spacing:4px; }
.intro-note p{ color:var(--muted);font-size:14px;line-height:1.8;transition:color .6s ease; }

/* Anime divider */
.anime-divider{
  display:none;height:2px;
  background:linear-gradient(90deg, transparent, #f59e0b 40%, #c084fc, transparent);
  margin:20px 0;border-radius:999px;opacity:.5;
}
body.anime-mode .anime-divider{ display:block; }

/* =============================================
   IMAGE WRAPPER
============================================= */
.image-wrapper{
  position:relative;width:420px;margin:auto;
}
.image{ width:100%;display:block;user-select:none;pointer-events:none;border-radius:30px; }
.robot-layer{
  position:absolute;inset:0;
  mask-image:radial-gradient(circle at center, rgba(0,0,0,1) 0%, rgba(0,0,0,.9) 25%, rgba(0,0,0,.5) 45%, transparent 70%);
  -webkit-mask-image:radial-gradient(circle at center, rgba(0,0,0,1) 0%, rgba(0,0,0,.9) 25%, rgba(0,0,0,.5) 45%, transparent 70%);
  mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;
  mask-size:0px 0px;-webkit-mask-size:0px 0px;
  mask-position:center;-webkit-mask-position:center;
  filter:saturate(1.15) contrast(1.1) drop-shadow(0 0 25px rgba(var(--accent-rgb),.3));
  will-change:mask-size,mask-position,-webkit-mask-size,-webkit-mask-position;
}
.glow{
  position:absolute;width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle, var(--glow-color), transparent 70%);
  filter:blur(40px);pointer-events:none;transform:translate(-50%,-50%);
  opacity:0;transition:background .6s ease;
  will-change:left,top,opacity;
}
.cursor{
  position:absolute;width:24px;height:24px;border-radius:50%;
  border:1px solid var(--cursor-border);transform:translate(-50%,-50%);
  pointer-events:none;z-index:10;transition:border-color .6s ease;
  will-change:left,top;
}
body.anime-mode .cursor{
  border-radius:0;transform:translate(-50%,-50%) rotate(45deg);width:20px;height:20px;
}

/* =============================================
   ROBOT MODE: image frame — corner brackets + subtle arc
============================================= */
.robot-frame{
  display:block;
  position:absolute;inset:0;border-radius:30px;pointer-events:none;z-index:4;
}
body.anime-mode .robot-frame{ display:none; }

/* corner bracket SVG is injected by JS into .robot-frame */
.robot-frame svg{ position:absolute;inset:0;width:100%;height:100%; }

/* =============================================
   ANIME MODE: image frame (gradient border + rotating arc)
============================================= */
body.anime-mode .image-wrapper::before{
  content:'';position:absolute;inset:-3px;border-radius:33px;
  background:linear-gradient(135deg,#c084fc,#f59e0b,#7c3aed,#f59e0b);
  z-index:-1;opacity:.5;animation:frameRotate 4s linear infinite;background-size:300% 300%;
}
@keyframes frameRotate{
  0%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}

/* =============================================
   ANIME BADGE
============================================= */
.anime-badge{
  display:none;position:absolute;bottom:-18px;right:-18px;
  background:linear-gradient(135deg,#7c3aed,#f59e0b);border-radius:50%;
  width:72px;height:72px;align-items:center;justify-content:center;flex-direction:column;
  font-family:'Cinzel',serif;font-size:9px;font-weight:700;color:#fff;
  letter-spacing:1px;text-align:center;line-height:1.3;
  box-shadow:0 0 30px rgba(192,132,252,.4);animation:badgePulse 3s ease-in-out infinite;z-index:5;
}
body.anime-mode .anime-badge{ display:flex; }
.anime-badge .badge-num{ font-size:20px;font-weight:900;color:#fde68a;line-height:1; }
@keyframes badgePulse{
  0%,100%{ box-shadow:0 0 20px rgba(192,132,252,.4); }
  50%{ box-shadow:0 0 40px rgba(192,132,252,.8), 0 0 60px rgba(245,158,11,.3); }
}

/* =============================================
   RESPONSIVE
============================================= */
@media(max-width:1100px){
  body{ overflow:auto; }
  .hero{ min-height:auto;padding:110px 28px 80px; }
  .hero-content{ grid-template-columns:1fr; }
  .left{ max-width:none;text-align:center; }
  .description{ margin-left:auto;margin-right:auto; }
  .buttons,.meta-row{ justify-content:center; }
  .image-wrapper{ order:-1; }
  .kanji-strip{ display:none !important; }
}
@media(max-width:720px){
  .hero{ padding:100px 22px 70px; }
  .hero-content{ gap:24px; }
  .left h1{ font-size:58px; }
  body.anime-mode .left h1{ font-size:52px; }
  .typing{ font-size:20px; }
  .image-wrapper{ width:100%;max-width:380px; }
}
@media(max-width:480px){
  .left h1{ font-size:48px; }
  body.anime-mode .left h1{ font-size:40px; }
  .role{ font-size:13px;letter-spacing:2px; }
  .description{ font-size:15px; }
  .buttons{ flex-direction:column; }
  .btn{ text-align:center; }
  .mode-toggle{ top:14px;right:14px; }
}

.mode-transitioning *{
  transition:background-color .5s ease, color .5s ease, border-color .5s ease, box-shadow .5s ease !important;
}