/* ==========================================================================
   Rua — Introduction Site
   ========================================================================== */

:root{
  --bg:#fff8f7;
  --bg-alt:#fdeaed;
  --ink:#4a3a3a;
  --ink-dim:#8d7574;
  --ink-faint:#b79a9b;
  --accent:#e58ba0;
  --accent-deep:#cf6a83;
  --accent-soft:rgba(229,139,160,.14);
  --petal:#f3b6c3;
  --petal-2:#f8d3da;
  --line:rgba(74,58,58,.12);
  --line-strong:rgba(74,58,58,.22);
  --shadow-soft:0 10px 30px rgba(74,58,58,.08);

  --font-serif:'Shippori Mincho','Hiragino Mincho ProN',serif;
  --font-sans:'Zen Kaku Gothic New','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
  --font-code:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --container:760px;
  --pad:clamp(1.25rem,5vw,3rem);
  --header-h:96px;
  --radius:16px;
  --ease:cubic-bezier(.16,1,.3,1);
}

/* ---- Reset ---- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{
  background:var(--bg);
  scroll-behavior:smooth;
  font-size:clamp(15px,1.4vw,17px);
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
}

body{
  font-family:var(--font-sans);
  background:var(--bg);
  color:var(--ink);
  line-height:1.75;
  font-weight:300;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
ul,ol{ list-style:none; }
h1,h2,h3{ font-family:var(--font-serif); font-weight:600; line-height:1.2; }

a:focus-visible,button:focus-visible{
  outline:1px solid var(--accent);
  outline-offset:4px;
}

::selection{ background:var(--accent); color:#fff8f7; }

::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:5px; }
::-webkit-scrollbar-thumb:hover{ background:var(--accent); }

.scroll-progress{
  position:fixed;
  top:0; left:0;
  height:2px;
  width:0%;
  background:var(--accent);
  z-index:1001;
}

/* ---- Sakura trees ---- */
.sakura-defs{ position:absolute; width:0; height:0; overflow:hidden; }

.tree-decor{
  position:fixed;
  top:10px;
  z-index:2;
  pointer-events:none;
  width:clamp(340px, 34vw, 560px);
  aspect-ratio:650/1000;
  will-change:transform;
  filter:drop-shadow(0 10px 30px rgba(229,139,160,0.18));
}
.tree-decor svg{ width:100%; height:100%; display:block; overflow:visible; }

.tree-decor--left{
  left:-65px;
  transform-origin:5% 85%;
  animation:tree-breeze-left 10s ease-in-out infinite;
}

.tree-decor--right{
  right:-65px;
  transform-origin:95% 85%;
  animation:tree-breeze-right 11.5s ease-in-out infinite -3.5s;
}

@keyframes tree-breeze-left{
  0%, 100%{ transform:rotate(0deg) scale(1); }
  32%{ transform:rotate(1.1deg) scale(1.006); }
  65%{ transform:rotate(-0.7deg) scale(0.996); }
  84%{ transform:rotate(0.4deg) scale(1.003); }
}

@keyframes tree-breeze-right{
  0%, 100%{ transform:rotate(0deg) scale(1); }
  28%{ transform:rotate(-1.2deg) scale(1.006); }
  62%{ transform:rotate(0.8deg) scale(0.996); }
  82%{ transform:rotate(-0.4deg) scale(1.003); }
}

@media (max-width:1200px){
  .tree-decor{
    width:clamp(280px, 32vw, 420px);
    opacity:0.92;
  }
  .tree-decor--left{ left:-75px; }
  .tree-decor--right{ right:-75px; }
}

@media (max-width:900px){
  .tree-decor{
    width:280px;
    top:30px;
    opacity:0.85;
  }
  .tree-decor--left{ left:-95px; }
  .tree-decor--right{ right:-95px; }
}

@media (max-width:600px){
  .tree-decor{
    width:210px;
    top:60px;
    opacity:0.75;
  }
  .tree-decor--left{ left:-95px; }
  .tree-decor--right{ right:-95px; }
}

@media (prefers-reduced-motion:reduce){
  .tree-decor--left, .tree-decor--right{ animation:none; }
}

/* ---- Sakura petals ---- */
.sakura{
  position:fixed;
  inset:0;
  z-index:5;
  overflow:hidden;
  pointer-events:none;
}
.petal{
  position:absolute;
  top:-8%;
  width:14px;
  height:14px;
  background:linear-gradient(135deg,var(--petal),var(--petal-2));
  border-radius:0 60% 60% 60%;
  opacity:.8;
  animation:petal-fall linear infinite;
}
@keyframes petal-fall{
  0%{ transform:translate3d(0,-10vh,0) rotate(0deg); }
  25%{ transform:translate3d(24px,25vh,0) rotate(90deg); }
  50%{ transform:translate3d(-18px,50vh,0) rotate(180deg); }
  75%{ transform:translate3d(22px,75vh,0) rotate(270deg); }
  100%{ transform:translate3d(-12px,108vh,0) rotate(360deg); }
}
.petal:nth-child(1){ left:4%; width:10px; height:10px; animation-duration:16s; animation-delay:-2s; }
.petal:nth-child(2){ left:12%; width:16px; height:16px; animation-duration:21s; animation-delay:-8s; }
.petal:nth-child(3){ left:20%; width:9px; height:9px; animation-duration:14s; animation-delay:-5s; }
.petal:nth-child(4){ left:29%; width:14px; height:14px; animation-duration:19s; animation-delay:-12s; }
.petal:nth-child(5){ left:37%; width:11px; height:11px; animation-duration:23s; animation-delay:-1s; }
.petal:nth-child(6){ left:46%; width:17px; height:17px; animation-duration:17s; animation-delay:-15s; }
.petal:nth-child(7){ left:54%; width:10px; height:10px; animation-duration:20s; animation-delay:-9s; }
.petal:nth-child(8){ left:62%; width:13px; height:13px; animation-duration:15s; animation-delay:-4s; }
.petal:nth-child(9){ left:70%; width:16px; height:16px; animation-duration:22s; animation-delay:-18s; }
.petal:nth-child(10){ left:78%; width:9px; height:9px; animation-duration:18s; animation-delay:-6s; }
.petal:nth-child(11){ left:85%; width:15px; height:15px; animation-duration:24s; animation-delay:-11s; }
.petal:nth-child(12){ left:92%; width:11px; height:11px; animation-duration:16s; animation-delay:-14s; }
.petal:nth-child(13){ left:97%; width:13px; height:13px; animation-duration:20s; animation-delay:-3s; }
.petal:nth-child(14){ left:8%; width:12px; height:12px; animation-duration:25s; animation-delay:-20s; }
@media (prefers-reduced-motion:reduce){
  .sakura{ display:none; }
}

/* ---- Reveal-on-scroll (progressive enhancement) ---- */
.js [data-reveal]{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.js [data-reveal].in-view{
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{ opacity:1; transform:none; transition:none; }
}

/* ==========================================================================
   Header / Navigation
   ========================================================================== */

.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:1000;
  padding:0 var(--pad);
  border-bottom:1px solid transparent;
  transition:transform .4s var(--ease),background-color .4s var(--ease),border-color .4s var(--ease);
}
.site-header.is-scrolled{
  background:rgba(255,248,247,.8);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-color:var(--line);
}
.site-header.is-hidden{ transform:translateY(-100%); }

.header-inner{
  max-width:var(--container);
  margin:0 auto;
  height:var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.logo{ font-family:var(--font-serif); font-size:1.5rem; letter-spacing:.02em; }
.logo-dot{ color:var(--accent); }

.nav-desktop{ display:flex; gap:2.5rem; }
.nav-desktop a{
  position:relative;
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.25rem 0;
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-dim);
  transition:color .3s;
}
.nav-desktop a::after{
  content:'';
  position:absolute;
  left:0; bottom:0;
  width:0; height:1px;
  background:var(--accent);
  transition:width .3s var(--ease);
}
.nav-desktop a:hover,.nav-desktop a.is-active{ color:var(--ink); }
.nav-desktop a:hover::after,.nav-desktop a.is-active::after{ width:100%; }
.nav-index{ color:var(--accent); font-size:.7rem; }

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:32px; height:32px;
}
.nav-toggle span{
  display:block;
  width:100%; height:1px;
  background:var(--ink);
  transition:transform .3s var(--ease),opacity .3s var(--ease);
}
.nav-toggle.is-open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.nav-mobile{
  position:fixed;
  inset:0;
  z-index:998;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:var(--pad);
  background:var(--bg);
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px);
  transition:opacity .4s var(--ease),visibility .4s,transform .4s var(--ease);
}
.nav-mobile.is-open{ opacity:1; visibility:visible; transform:translateY(0); }
.nav-mobile nav{ display:flex; flex-direction:column; gap:1.5rem; }
.nav-mobile a{ font-family:var(--font-serif); font-size:2.4rem; }
.nav-mobile-foot{
  position:absolute;
  bottom:var(--pad); left:var(--pad); right:var(--pad);
  display:flex; justify-content:space-between;
  font-size:.75rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
body.nav-open{ overflow:hidden; }

@media (max-width:860px){
  .nav-desktop{ display:none; }
  .nav-toggle{ display:flex; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:calc(var(--header-h) + 2rem) var(--pad) 4rem;
  overflow:hidden;
}

.hero-bg-shape{
  position:absolute;
  top:50%; left:50%;
  width:min(70vw,900px);
  height:min(70vw,900px);
  background:radial-gradient(circle at 30% 30%, var(--accent-soft), transparent 60%);
  transform:translate(-50%,-50%);
  filter:blur(40px);
  pointer-events:none;
}

.hero-inner{
  position:relative;
  max-width:var(--container);
  margin:0 auto;
  width:100%;
}

.eyebrow{
  margin-bottom:1.5rem;
  font-size:.75rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--accent);
}

.hero-title{
  display:flex;
  align-items:baseline;
  gap:1.25rem;
  flex-wrap:wrap;
}
.hero-title-main{
  font-family:var(--font-serif);
  font-weight:600;
  font-size:clamp(4.5rem,16vw,11rem);
  letter-spacing:-.02em;
  line-height:.9;
  color:var(--ink);
}
.hero-title-kana{
  font-family:var(--font-sans);
  font-size:clamp(1rem,2vw,1.5rem);
  letter-spacing:.1em;
  color:var(--ink-dim);
}

.hero-tagline{
  margin-top:2.5rem;
  max-width:32ch;
  font-family:var(--font-serif);
  font-size:clamp(1.1rem,2.4vw,1.6rem);
  line-height:1.6;
  color:var(--ink-dim);
}

.scroll-cue{
  position:absolute;
  bottom:2rem; left:50%;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.75rem;
  font-size:.7rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.scroll-cue span{
  width:1px; height:36px;
  background:linear-gradient(var(--accent),transparent);
  animation:scrollcue 2s ease-in-out infinite;
}
@keyframes scrollcue{
  0%{ transform:scaleY(0); transform-origin:top; }
  50%{ transform:scaleY(1); transform-origin:top; }
  50.01%{ transform-origin:bottom; }
  100%{ transform:scaleY(0); transform-origin:bottom; }
}
@media (prefers-reduced-motion:reduce){
  .scroll-cue span{ animation:none; }
}

/* ==========================================================================
   Section shared
   ========================================================================== */

.section{
  max-width:var(--container);
  margin:0 auto;
  padding:10rem var(--pad);
}
.section-head{
  display:flex;
  align-items:baseline;
  gap:1rem;
  margin-bottom:4.5rem;
}
.section-head::after{
  content:'';
  flex:1;
  height:1px;
  margin-left:1rem;
  background:var(--line);
}
.section-num{ font-size:.85rem; color:var(--accent); }
.section-title{ font-size:clamp(2rem,4vw,3rem); }

@media (max-width:760px){
  .section{ padding:6rem var(--pad); }
}

/* ==========================================================================
   About
   ========================================================================== */

.about-content{ max-width:74ch; }
.about-lead{ margin-bottom:1.5rem; font-family:var(--font-serif); font-size:1.4rem; }
.about-text{ max-width:56ch; margin-bottom:3.5rem; color:var(--ink-dim); }

.fact-list{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2rem 2.5rem;
  padding-top:2.5rem;
}
@media (max-width:640px){
  .fact-list{ grid-template-columns:repeat(2,1fr); }
}
.fact-item{
  display:flex;
  flex-direction:column;
  gap:.75rem;
  padding-top:1.5rem;
  border-top:1px solid var(--line);
}
.fact-item dt{
  font-size:.7rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.fact-item dd{ font-family:var(--font-serif); font-size:1.15rem; }

/* ==========================================================================
   Rua (model spec)
   ========================================================================== */

.model-intro{ margin-bottom:3.5rem; }

.model-run{
  display:flex;
  align-items:center;
  gap:1rem;
  margin-top:2rem;
  padding:1rem 1.25rem;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--bg-alt);
  box-shadow:var(--shadow-soft);
}
.model-run-label{
  font-size:.7rem;
  letter-spacing:.15em;
  color:var(--accent-deep);
}
.model-run code{
  flex:1;
  overflow-x:auto;
  font-family:var(--font-code);
  font-size:.9rem;
  white-space:nowrap;
  color:var(--ink);
}
.copy-btn{
  flex-shrink:0;
  padding:.4rem .9rem;
  border:1px solid var(--line-strong);
  border-radius:999px;
  font-size:.7rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-faint);
  transition:color .3s,border-color .3s,background-color .3s;
}
.copy-btn:hover{ color:var(--accent-deep); border-color:var(--accent); background:var(--accent-soft); }

.model-tools{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1rem;
  margin-top:4rem;
}
.model-tools-label{
  font-size:.7rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.tool-tags{ display:flex; flex-wrap:wrap; gap:.6rem; }
.tool-tags li{
  padding:.4rem .9rem;
  border-radius:999px;
  background:var(--accent-soft);
  font-size:.75rem;
  letter-spacing:.05em;
  color:var(--accent-deep);
}

.model-link{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  margin-top:3.5rem;
  padding-bottom:.35rem;
  border-bottom:1px solid var(--line-strong);
  font-size:.85rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  transition:color .3s,border-color .3s;
}
.model-link:hover{ color:var(--accent-deep); border-color:var(--accent); }
.work-arrow{ display:inline-block; color:var(--accent); transition:transform .3s var(--ease); }
.model-link:hover .work-arrow{ transform:translate(3px,-3px); }

/* ==========================================================================
   Contact
   ========================================================================== */

.contact-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.5rem;
  padding:2rem 0 3rem;
  text-align:center;
}
.contact-lead{
  font-family:var(--font-serif);
  font-size:clamp(1.8rem,4vw,3rem);
  line-height:1.4;
}
.contact-discord{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.25rem;
  margin-top:1rem;
}
.discord-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.75rem;
  padding:1.5rem 2rem;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--bg-alt);
  box-shadow:var(--shadow-soft);
  transition:border-color .3s,box-shadow .3s;
}
.discord-card:hover{
  border-color:var(--accent);
  box-shadow:0 12px 35px rgba(229,139,160,.16);
}
.discord-badge{
  font-size:.7rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--accent-deep);
  font-weight:500;
}
.discord-row{
  display:flex;
  align-items:center;
  gap:1rem;
}
.discord-icon{
  width:26px;
  height:26px;
  fill:#5865F2; /* Discord Brand Color */
}
.discord-id{
  font-family:var(--font-code);
  font-size:1.4rem;
  font-weight:600;
  letter-spacing:.05em;
  color:var(--ink);
}
.discord-desc{
  font-size:.9rem;
  color:var(--ink-dim);
}
.discord-desc strong{
  color:var(--ink);
  font-family:var(--font-code);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:2rem var(--pad);
  border-top:1px solid var(--line);
  font-size:.75rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.to-top{ color:var(--ink-faint); transition:color .3s; }
.to-top:hover{ color:var(--accent-deep); }

@media (max-width:600px){
  .site-footer{ flex-direction:column; gap:1rem; text-align:center; }
}