/* ==================================================================
   TEIKOKU 3D THEME
   Portal-del-anime skin: cosmic glass, neon glow, 3D tilt everywhere.
   Loaded AFTER main.css — everything here intentionally overrides it.
================================================================== */

:root{
  --tk-void:        #07040f;
  --tk-void-2:      #0d0820;
  --tk-panel:       rgba(20, 14, 40, 0.55);
  --tk-panel-solid: #150c2c;
  --tk-line:        rgba(255, 255, 255, 0.08);
  --tk-magenta:     #ff2e88;
  --tk-violet:      #8b5cf6;
  --tk-cyan:        #22d3ee;
  --tk-gold:        #ffd166;
  --tk-text:        #f1ecff;
  --tk-text-dim:    #b9aee0;
  --tk-grad-1: linear-gradient(135deg, var(--tk-magenta), var(--tk-violet) 55%, var(--tk-cyan));
}

/* ---------------- base rewrite ---------------- */
html{ background: var(--tk-void); }

body{
  background:
    radial-gradient(60% 50% at 12% -10%, rgba(139,92,246,.35), transparent 60%),
    radial-gradient(50% 40% at 100% 0%, rgba(34,211,238,.22), transparent 60%),
    radial-gradient(70% 60% at 50% 120%, rgba(255,46,136,.18), transparent 60%),
    var(--tk-void) !important;
  color: var(--tk-text);
  overflow-x: hidden;
  cursor: default;
}

section.section, .about, .services, .testimonials, .portfolio, .faq, .team, .contact, .stats{
  background-image: none !important;
  background: transparent !important;
}

h1,h2,h3,h4,h5{ font-family: "Orbitron", var(--heading-font); letter-spacing: .3px; }

::selection{ background: var(--tk-magenta); color: #fff; }

/* custom scrollbar */
::-webkit-scrollbar{ width: 10px; }
::-webkit-scrollbar-track{ background: var(--tk-void); }
::-webkit-scrollbar-thumb{ background: var(--tk-grad-1); border-radius: 10px; }

/* ---------------- loader / portal ---------------- */
#teikoku-loader{
  position: fixed; inset: 0; z-index: 999999;
  background: var(--tk-void);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 18px;
  transition: opacity .6s ease, visibility .6s ease;
}
#teikoku-loader.tk-hide{ opacity: 0; visibility: hidden; pointer-events: none; }
.portal-ring{
  position: absolute; width: 140px; height: 140px; border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--tk-magenta);
  border-bottom-color: var(--tk-cyan);
  animation: tk-spin 1.4s linear infinite;
  filter: drop-shadow(0 0 12px rgba(255,46,136,.6));
}
.portal-ring.ring-2{ width: 190px; height: 190px; border-top-color: var(--tk-violet); border-bottom-color: transparent; border-left-color: var(--tk-gold); animation-duration: 2.1s; animation-direction: reverse; opacity: .8;}
.portal-ring.ring-3{ width: 240px; height: 240px; border-color: transparent; border-top-color: var(--tk-cyan); animation-duration: 3s; opacity: .5;}
.loader-text{
  font-family: "Orbitron", sans-serif; letter-spacing: 6px; color: var(--tk-text);
  font-size: 1.4rem; z-index: 1; text-shadow: 0 0 18px var(--tk-magenta);
}
.loader-text small{ display:block; font-family: var(--default-font); letter-spacing: 2px; font-size: .6rem; color: var(--tk-text-dim); margin-top: 6px; text-transform: uppercase;}
@keyframes tk-spin{ to{ transform: rotate(360deg);} }

/* ---------------- cursor glow ---------------- */
#cursor-glow{
  position: fixed; top:0; left:0; width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,46,136,.9), rgba(139,92,246,.4) 60%, transparent 70%);
  pointer-events: none; z-index: 999998; mix-blend-mode: screen;
  transform: translate(-50%,-50%); transition: width .2s, height .2s, opacity .2s;
  opacity: 0;
}
@media (hover:hover) and (pointer:fine){ #cursor-glow{ opacity: 1; } }
#cursor-glow.tk-active{ width: 46px; height: 46px; background: radial-gradient(circle, rgba(34,211,238,.95), rgba(255,46,136,.5) 55%, transparent 70%); }

/* ---------------- header ---------------- */
.header{
  background: rgba(10, 6, 22, 0.55) !important;
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid var(--tk-line);
}
.header .logo-kanji{
  font-family: "Orbitron", sans-serif;
  display: inline-flex; align-items:center; justify-content:center;
  width: 38px; height: 38px; margin-right: 10px; border-radius: 10px;
  background: var(--tk-grad-1); color: #fff; font-size: 1.1rem;
  box-shadow: 0 0 18px rgba(255,46,136,.55);
}
.header .sitename{
  background: var(--tk-grad-1); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.navmenu ul li a{ color: var(--tk-text-dim) !important; font-weight: 600; position: relative;}
.navmenu ul li a::after{
  content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px;
  background: var(--tk-grad-1); transition: width .3s ease;
}
.navmenu ul li a:hover, .navmenu ul li a.active{ color: #fff !important; }
.navmenu ul li a:hover::after, .navmenu ul li a.active::after{ width: 100%; }
.btn-getstarted{
  background: var(--tk-grad-1) !important; border: none !important; color:#fff !important;
  box-shadow: 0 6px 22px rgba(255,46,136,.4); transition: transform .25s ease, box-shadow .25s ease;
}
.btn-getstarted:hover{ transform: translateY(-2px) scale(1.03); box-shadow: 0 10px 28px rgba(34,211,238,.5); }

/* ---------------- hero 3D ---------------- */
.hero-3d{ position: relative; min-height: 100vh; display:flex; align-items:center; overflow: hidden; }
#hero-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.hero-glow{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background: radial-gradient(circle at 30% 40%, rgba(139,92,246,.35), transparent 55%),
              radial-gradient(circle at 80% 70%, rgba(255,46,136,.25), transparent 55%);
}
.hero-3d .container{ z-index: 1; }

.hero-tag{
  display:inline-flex; align-items:center; gap:8px; width: fit-content;
  padding: 6px 16px; border-radius: 999px; font-size: .8rem; letter-spacing: 1px;
  color: var(--tk-cyan); border: 1px solid rgba(34,211,238,.4); background: rgba(34,211,238,.08);
  margin-bottom: 18px; text-transform: uppercase;
}
.hero-title{
  font-size: clamp(2.6rem, 6vw, 5rem); font-weight: 900; line-height: 1.05; margin-bottom: 18px;
  background: var(--tk-grad-1); -webkit-background-clip: text; background-clip:text; color: transparent;
  position: relative; text-shadow: none;
}
.hero-title::after{
  content: attr(data-text);
  position: absolute; left: 0; top: 0; z-index: -1;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.08);
}
.hero .button, .btn-3d{
  position: relative; display:inline-block; padding: 14px 34px; border-radius: 14px;
  background: var(--tk-grad-1); color:#fff !important; font-weight:700; letter-spacing:.5px;
  border: none; overflow:hidden; transform-style: preserve-3d;
  box-shadow: 0 10px 30px rgba(255,46,136,.35), inset 0 0 0 1px rgba(255,255,255,.15);
  transition: transform .25s ease, box-shadow .25s ease;
}
.hero .button:hover, .btn-3d:hover{ transform: translateY(-4px) rotateX(6deg); box-shadow: 0 18px 40px rgba(34,211,238,.45); color:#fff !important; }
.hero .button span{ position: relative; z-index: 1; }

.hero-mini-stats{ display:flex; gap: 28px; margin-top: 30px; flex-wrap: wrap;}
.hero-mini-stats div{ display:flex; flex-direction:column; }
.hero-mini-stats strong{ font-family:"Orbitron",sans-serif; font-size:1.5rem; color:#fff; }
.hero-mini-stats span{ font-size:.75rem; color: var(--tk-text-dim); text-transform:uppercase; letter-spacing:1px; }

.hero-img{ position:relative; perspective: 1200px; }
.hero-img img{ position:relative; z-index:1; filter: drop-shadow(0 25px 45px rgba(139,92,246,.45)); animation: tk-float 5s ease-in-out infinite; }
.hero-img-ring{
  position:absolute; top:50%; left:50%; width: 78%; padding-top: 78%; transform: translate(-50%,-50%);
  border-radius: 50%; border: 1px dashed rgba(255,255,255,.25);
  box-shadow: 0 0 60px rgba(139,92,246,.35);
  animation: tk-spin 18s linear infinite;
}
@keyframes tk-float{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-16px);} }

.scroll-cue{
  position:absolute; bottom: 26px; left:50%; transform: translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  font-size:.7rem; letter-spacing:2px; text-transform:uppercase; color: var(--tk-text-dim); z-index:1;
}
.scroll-cue span{ width: 2px; height: 26px; background: var(--tk-grad-1); border-radius: 2px; animation: tk-cue 1.6s ease-in-out infinite; }
@keyframes tk-cue{ 0%{ opacity:0; transform: translateY(-6px);} 40%{opacity:1;} 100%{ opacity:0; transform: translateY(10px);} }

/* ---------------- section titles ---------------- */
.section-title{ text-align:center; margin-bottom: 50px; }
.section-eyebrow{
  display:inline-block; font-size:.75rem; letter-spacing:3px; text-transform:uppercase;
  color: var(--tk-gold); margin-bottom: 8px;
}
.section-title h2{
  font-size: clamp(1.8rem,4vw,2.6rem); font-weight:800; color:#fff;
  position: relative; display:inline-block; padding-bottom: 14px;
}
.section-title h2::after{
  content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width: 70px; height: 3px; border-radius: 3px; background: var(--tk-grad-1);
}
.section-title p{ color: var(--tk-text-dim); }

/* ---------------- generic glass / 3D tilt cards ---------------- */
.tilt-card{
  transform-style: preserve-3d; transition: transform .12s ease, box-shadow .3s ease;
  will-change: transform;
}
.stats-item, .service-item, .testimonial-item, .team-member, .info-item, .teikoku-form,
.about-img-wrap, .hero-img{
  background: var(--tk-panel) !important;
  border: 1px solid var(--tk-line) !important;
  border-radius: 20px !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;
}
.stats-item{ padding: 30px 15px !important; }
.stats-item i{ font-size: 1.8rem; color: var(--tk-cyan); display:block; margin-bottom: 8px; text-shadow: 0 0 14px rgba(34,211,238,.6); }
.stats-item span{ background: var(--tk-grad-1); -webkit-background-clip:text; background-clip:text; color:transparent; }

.tilt-card::before{
  content:""; position:absolute; inset:0; border-radius: inherit; padding: 1px;
  background: var(--tk-grad-1); opacity:0; transition: opacity .3s ease;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none;
}
.tilt-card:hover::before{ opacity: 1; }
.tilt-card:hover{ box-shadow: 0 20px 45px rgba(139,92,246,.35); }

.service-item .icon{ color: var(--tk-magenta) !important; text-shadow: 0 0 14px rgba(255,46,136,.5); }
.service-item .title a{ color:#fff !important; }
.service-item .description{ color: var(--tk-text-dim) !important; }

.testimonial-item{ padding: 32px 26px !important; }
.testimonial-item span{ color: var(--tk-text) !important; }
.testimonial-img{ border: 2px solid rgba(255,255,255,.2) !important; box-shadow: 0 0 0 4px rgba(139,92,246,.15); }
.testimonial-item h3{ color: #fff !important; }
.quote-icon-left, .quote-icon-right{ color: var(--tk-violet) !important; }

.about-img-wrap{ overflow:hidden; padding: 0 !important; }
.about-img-wrap img{ display:block; border-radius: 20px; position:relative; z-index:1; }
.about-img-glow{ position:absolute; inset:-2px; border-radius: 20px; background: var(--tk-grad-1); opacity:.25; filter: blur(30px); z-index:0; }
.about .content h3{ color:#fff; }
.about .content ul li{ color: var(--tk-text-dim); }
.about .content ul li i{ color: var(--tk-cyan); }

/* portfolio */
.portfolio-filters li{ color: var(--tk-text-dim) !important; }
.portfolio-filters li.filter-active{ color:#fff !important; background: var(--tk-grad-1) !important; }
.portfolio-content{ padding: 10px !important; overflow: hidden;}
.portfolio-content img{ border-radius: 14px; transition: transform .5s ease; }
.portfolio-content:hover img{ transform: scale(1.06) rotate(-1deg); }
.portfolio-info{ background: rgba(7,4,15,.75) !important; }

/* team */
.team-member{ padding: 26px !important; text-align:center; }
.member-img{ border-radius: 16px; overflow:hidden; }
.member-info h4{ color:#fff !important; }
.member-info span{ color: var(--tk-magenta) !important; }
.member-info p{ color: var(--tk-text-dim) !important; }
.team-member .social a{ background: var(--tk-grad-1) !important; }

/* faq */
.faq-item{
  background: var(--tk-panel) !important; border:1px solid var(--tk-line) !important;
  border-radius: 16px !important; margin-bottom: 14px; backdrop-filter: blur(10px);
}
.faq-item h3{ color:#fff !important; }
.faq-content p{ color: var(--tk-text-dim) !important; }
.faq-toggle{ color: var(--tk-cyan) !important; }

/* contact */
.info-item{ padding: 24px !important; text-align:center; }
.info-item i{ font-size: 1.7rem; color: var(--tk-cyan); text-shadow: 0 0 14px rgba(34,211,238,.6);}
.info-item h3{ color:#fff !important; font-size:1rem; }
.btn-liv-getstarted{
  display:inline-block; margin-top:6px; padding:6px 16px; border-radius: 999px;
  background: var(--tk-grad-1); color:#fff !important; font-size:.8rem;
}
.teikoku-form{ padding: 30px !important; display:flex; flex-direction:column; gap: 6px; }
.teikoku-form label{ color: var(--tk-text-dim); font-size:.85rem; margin-top: 10px; }
.teikoku-form input, .teikoku-form textarea{
  background: rgba(255,255,255,.05); border:1px solid var(--tk-line); border-radius: 10px;
  padding: 10px 14px; color:#fff; outline:none; transition: border-color .2s, box-shadow .2s;
}
.teikoku-form input:focus, .teikoku-form textarea:focus{
  border-color: var(--tk-cyan); box-shadow: 0 0 0 3px rgba(34,211,238,.2);
}
.teikoku-form input[type="submit"]{
  margin-top: 16px; cursor:pointer; border:none; background: var(--tk-grad-1); font-weight:700;
  padding: 12px; transition: transform .2s ease;
}
.teikoku-form input[type="submit"]:hover{ transform: translateY(-2px); }

/* footer */
.footer{ border-top: 1px solid var(--tk-line); background: rgba(7,4,15,.9) !important; }
.footer .sitename{ background: var(--tk-grad-1); -webkit-background-clip:text; background-clip:text; color:transparent; }
.footer .social-links a{ background: rgba(255,255,255,.06) !important; }
.footer .social-links a:hover{ background: var(--tk-grad-1) !important; }

/* scroll top */
.scroll-top{ background: var(--tk-grad-1) !important; box-shadow: 0 8px 24px rgba(139,92,246,.5); }

/* play/pause button glow keep functional, just theme accent */
.play-pause-btn{ border-color: var(--tk-cyan) !important; color:#fff !important; }

@media (max-width: 991px){
  #hero-canvas{ opacity:.5; }
  .hero-mini-stats{ gap: 18px; }
}
@media (prefers-reduced-motion: reduce){
  .hero-img img, .hero-img-ring, .portal-ring{ animation: none !important; }
}