:root { --neon-pink: #FF006E; --neon-cyan: #00FFFF; --neon-green: #39FF14; --neon-yellow: #FFFF00; --neon-purple: #BC13FE; --dark-bg: #0A0A0A; --darker-bg: #000000; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif; background: var(--darker-bg); color: #FFFFFF; overflow-x: hidden; } .cyber-font { font-family: 'Orbitron', monospace; font-weight: 900; } .russo-font { font-family: 'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif; } .pop-font { font-family: 'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif; font-weight: 700; } .cute-font { font-family: 'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif; font-weight: 400; } .neon-glow-pink { text-shadow: 0 0 10px #FF006E, 0 0 20px #FF006E, 0 0 30px #FF006E, 0 0 40px #FF006E; } .neon-glow-cyan { text-shadow: 0 0 10px #00FFFF, 0 0 20px #00FFFF, 0 0 30px #00FFFF, 0 0 40px #00FFFF; } .neon-glow-green { text-shadow: 0 0 10px #39FF14, 0 0 20px #39FF14, 0 0 30px #39FF14, 0 0 40px #39FF14; } .neon-glow-yellow { text-shadow: 0 0 10px #FFFF00, 0 0 20px #FFFF00, 0 0 30px #FFFF00; } @keyframes neon-pulse-pink { from { text-shadow: 0 0 10px #FF006E, 0 0 20px #FF006E, 0 0 30px #FF006E; } to { text-shadow: 0 0 20px #FF006E, 0 0 30px #FF006E, 0 0 40px #FF006E; } } @keyframes neon-pulse-cyan { from { text-shadow: 0 0 10px #00FFFF, 0 0 20px #00FFFF, 0 0 30px #00FFFF; } to { text-shadow: 0 0 20px #00FFFF, 0 0 30px #00FFFF, 0 0 40px #00FFFF; } } @keyframes neon-pulse-green { from { text-shadow: 0 0 10px #39FF14, 0 0 20px #39FF14, 0 0 30px #39FF14; } to { text-shadow: 0 0 20px #39FF14, 0 0 30px #39FF14, 0 0 40px #39FF14; } } .gradient-bg-hero { background: linear-gradient(180deg, rgba(255,0,110,0.3) 0%, rgba(0,255,255,0.2) 25%, rgba(188,19,254,0.2) 50%, rgba(57,255,20,0.2) 75%, rgba(255,255,0,0.2) 100%); animation: gradient-shift 10s ease infinite; } @keyframes gradient-shift { 0%, 100% { background-position: 0% 0%; } 50% { background-position: 0% 100%; } } .neon-border { border: 2px solid; border-image: linear-gradient(45deg, #FF006E, #00FFFF, #39FF14, #FFFF00) 1; box-shadow: 0 0 20px rgba(255,0,110,0.5), inset 0 0 20px rgba(0,255,255,0.2); } .neon-border-pink { border: 2px solid #FF006E; box-shadow: 0 0 15px #FF006E, inset 0 0 15px rgba(255,0,110,0.3); } .neon-border-cyan { border: 2px solid #00FFFF; box-shadow: 0 0 15px #00FFFF, inset 0 0 15px rgba(0,255,255,0.3); } .neon-border-green { border: 2px solid #39FF14; box-shadow: 0 0 15px #39FF14, inset 0 0 15px rgba(57,255,20,0.3); } .glitch { position: relative; animation: glitch-anim 3s infinite; } .glitch::before, .glitch::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .glitch::before { animation: glitch-anim-1 0.5s infinite; color: #00FFFF; z-index: -1; } .glitch::after { animation: glitch-anim-2 0.5s infinite; color: #FF006E; z-index: -2; } @keyframes glitch-anim { 0%, 100% { transform: translate(0); } 20% { transform: translate(-2px, 2px); } 40% { transform: translate(-2px, -2px); } 60% { transform: translate(2px, 2px); } 80% { transform: translate(2px, -2px); } } @keyframes glitch-anim-1 { 0%, 100% { clip-path: inset(0 0 100% 0); transform: translate(0); } 25% { clip-path: inset(0 0 75% 0); transform: translate(-3px); } 50% { clip-path: inset(25% 0 50% 0); transform: translate(3px); } 75% { clip-path: inset(50% 0 25% 0); transform: translate(-3px); } } @keyframes glitch-anim-2 { 0%, 100% { clip-path: inset(100% 0 0 0); transform: translate(0); } 25% { clip-path: inset(75% 0 0 0); transform: translate(3px); } 50% { clip-path: inset(50% 0 25% 0); transform: translate(-3px); } 75% { clip-path: inset(25% 0 50% 0); transform: translate(3px); } } .neon-button { position: relative; display: inline-block; padding: 15px 40px; color: #FFFFFF; text-transform: uppercase; letter-spacing: 2px; font-weight: bold; background: linear-gradient(45deg, transparent, rgba(255,0,110,0.3), transparent); border: 2px solid; overflow: hidden; transition: all 0.3s; } .neon-button-pink { border-color: #FF006E; box-shadow: 0 0 20px #FF006E, inset 0 0 20px rgba(255,0,110,0.2); } .neon-button-pink:hover { background: #FF006E; box-shadow: 0 0 40px #FF006E, inset 0 0 20px rgba(255,0,110,0.5); transform: translateY(-2px); } .neon-button-cyan { border-color: #00FFFF; box-shadow: 0 0 20px #00FFFF, inset 0 0 20px rgba(0,255,255,0.2); } .neon-button-cyan:hover { background: #00FFFF; color: #000; box-shadow: 0 0 40px #00FFFF, inset 0 0 20px rgba(0,255,255,0.5); transform: translateY(-2px); } .neon-button-green { border-color: #39FF14; box-shadow: 0 0 20px #39FF14, inset 0 0 20px rgba(57,255,20,0.2); } .neon-button-green:hover { background: #39FF14; color: #000; box-shadow: 0 0 40px #39FF14, inset 0 0 20px rgba(57,255,20,0.5); transform: translateY(-2px); } .diagonal-section { position: relative; margin: 60px 0; } .diagonal-section::before { content: ''; position: absolute; top: -20px; left: 0; right: 0; bottom: -20px; background: inherit; transform: skewY(-6deg); transform-origin: top left; z-index: -1; } .diagonal-section-right::before { transform: skewY(5deg) translateY(-15px); transform-origin: top right; top: -25px; bottom: -25px; } .diagonal-section-alt::before { transform: skewY(-8deg) translateY(-20px) scaleX(1.02); top: -30px; bottom: -30px; } .diagonal-section::before { transition: transform 0.3s ease; } .diagonal-section:hover::before { transform: skewY(-8deg) scale(1.01); } .diagonal-section-right:hover::before { transform: skewY(7deg) translateY(-18px) scale(1.01); } .diagonal-section-alt:hover::before { transform: skewY(-10deg) translateY(-25px) scaleX(1.03); } .bg-image-scroll { position: absolute; top: 0; left: 0; width: 500%; height: 100%; opacity: 0.15; animation: scrollImages 40s linear infinite; display: flex; } .bg-image-item { width: 20%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; } @keyframes scrollImages { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } .animated-bg { background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,0,110,0.1) 10px, rgba(255,0,110,0.1) 20px), repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(0,255,255,0.1) 10px, rgba(0,255,255,0.1) 20px); animation: bg-scroll 20s linear infinite; } @keyframes bg-scroll { 0% { background-position: 0 0, 0 0; } 100% { background-position: 50px 50px, -50px -50px; } } ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: #000; } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #FF006E, #00FFFF, #39FF14); border-radius: 5px; } .float { animation: float 3s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); } } section video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } .gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; } .gallery-item { position: relative; overflow: hidden; border-radius: 10px; border: 2px solid transparent; transition: all 0.3s ease; cursor: pointer; } .gallery-item:hover { transform: scale(1.05); border-color: var(--neon-pink); box-shadow: 0 0 30px rgba(255,0,110,0.5); } .gallery-item img { width: 100%; height: 250px; object-fit: cover; transition: transform 0.3s ease; } .gallery-item:hover img { transform: scale(1.1); } .rainbow-text { background: linear-gradient(90deg, #FF006E, #00FFFF, #39FF14, #FFFF00, #BC13FE, #FF006E); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } @keyframes rainbow { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } img { loading: lazy; } .lazy-load { opacity: 0; transition: opacity 0.3s; } .lazy-load.loaded { opacity: 1; } #fixed-cta-buttons { transition: opacity 0.3s ease-in-out; }  .scroll-fade{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease;} .scroll-fade.is-visible{opacity:1;transform:translateY(0);} .neon-button:hover{transform:translateY(-2px) scale(1.03);} .hero-gradient{background:radial-gradient(60% 60% at 20% 20%, rgba(255,0,110,0.45) 0%, rgba(255,0,110,0) 60%),radial-gradient(50% 50% at 80% 30%, rgba(0,255,255,0.35) 0%, rgba(0,255,255,0) 65%),linear-gradient(120deg, rgba(188,19,254,0.25), rgba(57,255,20,0.2) 45%, rgba(255,255,0,0.2) 100%);background-size:200% 200%;animation:hero-gradient-shift 12s ease-in-out infinite;mix-blend-mode:screen;opacity:.7;} @keyframes hero-gradient-shift{0%{background-position:0% 0%;}50%{background-position:100% 100%;}100%{background-position:0% 0%;}} @media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto;}*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;} .scroll-fade{opacity:1 !important;transform:none !important;} .bg-image-scroll,.gradient-bg-hero,.neon-glow-pink,.neon-glow-cyan,.neon-glow-green,.glitch,.rainbow-text,.float,.hero-gradient{animation:none !important;}} .animate-slide-up{opacity:0;transform:translateY(50px);transition:opacity 1.2s cubic-bezier(0.25,0.1,0.25,1),transform 1.2s cubic-bezier(0.25,0.1,0.25,1);} .animate-slide-up.active{opacity:1;transform:translateY(0);} .animate-slide-left{opacity:0;transform:translateX(-50px);transition:opacity 1.1s cubic-bezier(0.25,0.1,0.25,1),transform 1.1s cubic-bezier(0.25,0.1,0.25,1);} .animate-slide-left.active{opacity:1;transform:translateX(0);} .animate-slide-right{opacity:0;transform:translateX(50px);transition:opacity 1.1s cubic-bezier(0.25,0.1,0.25,1),transform 1.1s cubic-bezier(0.25,0.1,0.25,1);} .animate-slide-right.active{opacity:1;transform:translateX(0);} .animate-scale{opacity:0;transform:scale(0.96);transition:opacity 1s cubic-bezier(0.25,0.1,0.25,1),transform 1s cubic-bezier(0.25,0.1,0.25,1);} .animate-scale.active{opacity:1;transform:scale(1);} .stagger-1{transition-delay:0.1s;} .stagger-2{transition-delay:0.2s;} .stagger-3{transition-delay:0.3s;} .stagger-4{transition-delay:0.4s;} .card-3d{transition:transform 0.5s cubic-bezier(0.25,0.1,0.25,1),box-shadow 0.5s cubic-bezier(0.25,0.1,0.25,1);} .card-3d:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(255,0,110,0.3);} .glow-pulse{animation:glow-pulse-anim 2s ease-in-out infinite;} @keyframes glow-pulse-anim{0%,100%{box-shadow:0 0 20px rgba(255,0,110,0.5);}50%{box-shadow:0 0 40px rgba(255,0,110,0.8),0 0 60px rgba(0,255,255,0.4);}}

/* Parallax - will-change for compositing */
.parallax-slow,.parallax-medium,.parallax-fast{transition:transform 0.1s linear;will-change:transform;}

/* Animation compositing optimization */
.animate-slide-up,.animate-scale,.card-3d,.gallery-item{will-change:transform,opacity;}

/* Tilt Card */
.tilt-card{transform-style:preserve-3d;transition:transform 0.15s ease-out;}
.tilt-card-inner{transform:translateZ(40px);transition:transform 0.15s ease-out;}
.tilt-card .tilt-shine{position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,0.25) 0%,rgba(255,255,255,0) 60%);opacity:0;transition:opacity 0.3s ease;pointer-events:none;border-radius:inherit;}
.tilt-card:hover .tilt-shine{opacity:1;}

@media (prefers-reduced-motion: reduce){
  .parallax-slow,.parallax-medium,.parallax-fast{transform:none !important;}
  .tilt-card{transform:none !important;}
}