/* ============================================================ 牛術黒帯 — Premium Effects Custom cursor / Ember canvas / Page transition / Corner frames / Shimmer / Magnetic / Grain ============================================================ */ /* ========== CUSTOM CURSOR ========== */ @media (hover: hover) and (pointer: fine) { *, *::before, *::after { cursor: none !important; } .cursor-dot { position: fixed; top: 0; left: 0; width: 6px; height: 6px; background: var(--gold); border-radius: 50%; pointer-events: none; z-index: 10000; transform: translate(-50%, -50%); will-change: left, top; transition: opacity 0.3s, transform 0.15s; } .cursor-ring { position: fixed; top: 0; left: 0; width: 34px; height: 34px; border: 1px solid rgba(201, 168, 76, 0.6); border-radius: 50%; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); will-change: left, top; transition: width 0.4s cubic-bezier(0.16,1,0.3,1), height 0.4s cubic-bezier(0.16,1,0.3,1), opacity 0.3s, border-color 0.4s; } .cursor-ring.hovering { width: 54px; height: 54px; border-color: rgba(201, 168, 76, 0.4); } .cursor-ring.clicking { width: 20px; height: 20px; border-color: var(--gold); } .cursor-dot.hidden, .cursor-ring.hidden { opacity: 0; } } /* ========== PAGE TRANSITION — REVEAL ========== */ /* * #pg-cover is placed inline in the HTML (first child). * It covers the page from frame 0 — before any JS runs — eliminating flash. * CSS keyframe animates it away; JS handles the exit (cover) only. */ @keyframes pgReveal { from { transform: scaleY(1); } to { transform: scaleY(0); } } #pg-cover { position: fixed; inset: 0; z-index: 9990; background: #090909; transform-origin: top; transform: scaleY(0); /* resting state after animation */ animation: pgReveal 0.58s cubic-bezier(0.76, 0, 0.24, 1) both; pointer-events: none; will-change: transform; } /* ========== HERO CORNER FRAMES ========== */ .hero-corners { position: absolute; inset: 32px; pointer-events: none; z-index: 3; } .hc { position: absolute; display: block; background: var(--gold); opacity: 0; transition: opacity 0.01s; } /* Horizontal bars */ .hc-tl-h, .hc-tr-h, .hc-bl-h, .hc-br-h { height: 1px; width: 0; } /* Vertical bars */ .hc-tl-v, .hc-tr-v, .hc-bl-v, .hc-br-v { width: 1px; height: 0; } /* Positions */ .hc-tl-h { top: 0; left: 0; } .hc-tl-v { top: 0; left: 0; } .hc-tr-h { top: 0; right: 0; } .hc-tr-v { top: 0; right: 0; } .hc-bl-h { bottom: 0; left: 0; } .hc-bl-v { bottom: 0; left: 0; } .hc-br-h { bottom: 0; right: 0; } .hc-br-v { bottom: 0; right: 0; } .hero-corners.revealed .hc { opacity: 0.45; } .hero-corners.revealed .hc-tl-h, .hero-corners.revealed .hc-tr-h, .hero-corners.revealed .hc-bl-h, .hero-corners.revealed .hc-br-h { width: 64px; transition: width 0.9s cubic-bezier(0.16,1,0.3,1), opacity 0.01s; } .hero-corners.revealed .hc-tl-v, .hero-corners.revealed .hc-tr-v, .hero-corners.revealed .hc-bl-v, .hero-corners.revealed .hc-br-v { height: 64px; transition: height 0.9s cubic-bezier(0.16,1,0.3,1), opacity 0.01s; } .hero-corners.revealed .hc-tl-h { transition-delay: 0.1s; } .hero-corners.revealed .hc-tl-v { transition-delay: 0.15s; } .hero-corners.revealed .hc-tr-h { transition-delay: 0.2s; } .hero-corners.revealed .hc-tr-v { transition-delay: 0.25s; } .hero-corners.revealed .hc-bl-h { transition-delay: 0.3s; } .hero-corners.revealed .hc-bl-v { transition-delay: 0.35s; } .hero-corners.revealed .hc-br-h { transition-delay: 0.4s; } .hero-corners.revealed .hc-br-v { transition-delay: 0.45s; } /* ========== LOGO SHIMMER ========== */ @keyframes goldShimmer { 0% { background-position: -300% center; } 100% { background-position: 300% center; } } .logo-shimmer { background: linear-gradient( 105deg, var(--gold) 0%, var(--gold) 38%, #fff5d6 48%, #ffe89a 52%, var(--gold) 62%, var(--gold) 100% ); background-size: 300% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: goldShimmer 5s linear infinite; animation-delay: 2s; } /* ========== SPLIT TEXT CHARS ========== */ .split-word { display: inline-block; overflow: hidden; vertical-align: top; } .split-char { display: inline-block; opacity: 0; transform: translateY(110%); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); } .split-char.visible { opacity: 1; transform: translateY(0); } /* ========== MAGNETIC BUTTON ripple ========== */ .btn-solid, .btn-outline, .nav-reserve { position: relative; overflow: hidden; } .btn-ripple { position: absolute; border-radius: 50%; transform: scale(0); background: rgba(201, 168, 76, 0.18); animation: ripple-anim 0.6s linear; pointer-events: none; } @keyframes ripple-anim { to { transform: scale(4); opacity: 0; } } /* ========== DECORATIVE BRAND MARK ========== */ .brand-mark { position: absolute; right: 6%; bottom: 12%; width: 120px; height: 120px; opacity: 0; animation: fadeIn 1.2s 2.2s forwards; pointer-events: none; z-index: 2; } @media (max-width: 900px) { .brand-mark { display: none; } } .brand-mark__ring { animation: spinSlow 40s linear infinite; transform-origin: center; } .brand-mark__inner { animation: spinSlow 25s linear infinite reverse; transform-origin: center; } @keyframes spinSlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ========== SECTION ORNAMENT LINES ========== */ .ornament-draw { display: block; width: 0; height: 1px; background: linear-gradient(to right, transparent, var(--gold-dim), transparent); transition: width 1.4s cubic-bezier(0.16,1,0.3,1); margin: 0 auto; } .ornament-draw.visible { width: 100%; } /* ========== EMBER CANVAS ========== */ #ember-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; } /* ========== GRAIN OVERLAY (styled inline by JS via SVG filter) ========== */ /* ========== HOVER LIFT — menu cards ========== */ .menu-card { transition: border-color var(--transition), transform 0.5s cubic-bezier(0.16,1,0.3,1), box-shadow 0.5s cubic-bezier(0.16,1,0.3,1); } .menu-card:hover { box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px var(--gold); transform: translateY(-8px); } /* ========== SECTION LABEL animate ========== */ .section-label { overflow: hidden; position: relative; } .section-label::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: var(--gold-dim); transform: scaleX(0); transform-origin: left; transition: transform 0.8s cubic-bezier(0.16,1,0.3,1) 0.3s; } .section-label.visible::after { transform: scaleX(1); }