:root {
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-blue: #0066FF;
  --color-gray-300: #D4D4D4;
  --color-gray-400: #A3A3A3;
  --color-gray-500: #737373;
  --color-gray-600: #525252;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  --font-medium: 500;
  --font-bold: 700;
  --radius-full: 9999px;
  --transition-fast: 150ms ease;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px;-webkit-text-size-adjust:100%}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Helvetica Neue',Arial,sans-serif;line-height:1.6;color:#000;background:#fff;overflow-x:hidden;-webkit-font-smoothing:antialiased}
::selection{background:#0066FF;color:#fff}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:#F5F5F5}
::-webkit-scrollbar-thumb{background:#A3A3A3;border-radius:9999px}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}

.global-bg{position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,#FFF 0%,#F8FAFF 50%,#FFF 100%);overflow:hidden}
.bg-grid{position:absolute;inset:-50%;width:200%;height:200%;background-image:linear-gradient(rgba(0,102,255,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,102,255,0.04) 1px,transparent 1px);background-size:80px 80px;will-change:transform}
.bg-gradient{position:absolute;inset:-20%;width:140%;height:140%;background:radial-gradient(ellipse 100% 60% at 50% 0%,rgba(0,102,255,0.08) 0%,transparent 60%),radial-gradient(ellipse 80% 50% at 100% 50%,rgba(0,102,255,0.04) 0%,transparent 50%),radial-gradient(ellipse 80% 50% at 0% 50%,rgba(0,102,255,0.04) 0%,transparent 50%);will-change:transform}
.bg-shapes{position:absolute;inset:0;pointer-events:none}
.bg-shape{position:absolute;border-radius:50%;opacity:0.6;will-change:transform}
.bg-shape-1{width:400px;height:400px;background:radial-gradient(circle,rgba(0,102,255,0.06) 0%,transparent 70%);top:10%;right:-10%}
.bg-shape-2{width:300px;height:300px;background:radial-gradient(circle,rgba(0,102,255,0.05) 0%,transparent 70%);top:40%;left:-5%}
.bg-shape-3{width:500px;height:500px;background:radial-gradient(circle,rgba(0,102,255,0.04) 0%,transparent 70%);bottom:20%;right:10%}
.bg-shape-4{width:250px;height:250px;background:radial-gradient(circle,rgba(0,102,255,0.05) 0%,transparent 70%);bottom:10%;left:20%}

.container{width:100%;max-width:1100px;margin:0 auto}
.section-label{display:inline-block;font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--color-blue);text-transform:uppercase;letter-spacing:0.2em;margin-bottom:var(--spacing-md)}
.section-title{font-size:var(--text-4xl);font-weight:var(--font-bold);color:var(--color-black);margin-bottom:var(--spacing-lg);line-height:1.1;letter-spacing:-0.02em}
.section-text{font-size:var(--text-lg);color:var(--color-gray-600);line-height:1.7}
@media(min-width:768px){.section-title{font-size:var(--text-5xl)}}
@media(min-width:1024px){.section-title{font-size:var(--text-6xl)}}

.hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:10rem 2rem;z-index:1}
.hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:200px;background:linear-gradient(to bottom,transparent 0%,rgba(255,255,255,.5) 50%,rgba(255,255,255,.95) 100%);pointer-events:none;z-index:1}
.hero-content{text-align:center}
.hero-title{font-size:7rem;font-weight:700;color:#000;margin-bottom:2rem;letter-spacing:-0.02em;line-height:1}
.hero-subtitle{font-size:1.25rem;color:#0066FF;margin-bottom:1.5rem;font-weight:500}
.hero-text{font-size:1.125rem;color:#525252;margin-bottom:3rem;line-height:1.8}
.scroll-indicator{position:absolute;bottom:4rem;left:50%;transform:translateX(-50%);color:#A3A3A3;animation:pulse 2s cubic-bezier(0.4,0,0.6,1) infinite}
@media(min-width:768px){.hero-title{font-size:9rem}.hero-subtitle{font-size:1.5rem}.hero-text{font-size:1.25rem}}
@media(min-width:1024px){.hero-title{font-size:11rem}}

.animate-on-scroll{opacity:0;transform:translateY(40px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.animate-on-scroll.visible{opacity:1;transform:translateY(0)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}

.sticky-section{min-height:auto;padding:0;position:relative}
.sticky-container{display:flex;height:300vh;position:relative}
.sticky-side{position:sticky;top:0;width:50%;height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--spacing-3xl);z-index:10;flex-shrink:0}
.sticky-header{max-width:420px}
.sticky-header .section-title{text-align:left}
.sticky-header .section-text{text-align:left;margin:0}
.sticky-slides{width:50%;height:100vh;position:sticky;top:0;flex-shrink:0;overflow:hidden}
.sticky-slide{height:100vh;display:flex;align-items:center;justify-content:center;position:absolute;inset:0;overflow:hidden;opacity:0;z-index:0;transition:opacity 0.5s ease}
.sticky-slide.active{opacity:1;z-index:2}
.slide-content{padding:var(--spacing-3xl);max-width:520px}
.slide-number{font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-blue);margin-bottom:var(--spacing-md);letter-spacing:0.1em}
.slide-title{font-size:var(--text-3xl);font-weight:var(--font-bold);color:var(--color-black);margin-bottom:var(--spacing-md)}
.slide-text{font-size:var(--text-lg);color:var(--color-gray-600);line-height:1.7;margin-bottom:var(--spacing-xl)}
.slide-date{margin-bottom:var(--spacing-md)}
.slide-year{display:inline-block;font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--color-blue);letter-spacing:0.1em;margin-right:var(--spacing-md)}
.slide-month{display:inline-block;font-size:var(--text-2xl);font-weight:var(--font-bold);color:var(--color-black)}
.slide-day{display:inline-block;font-size:var(--text-2xl);font-weight:var(--font-bold);color:var(--color-black);margin-left:0.25rem}

.sticky-left .sticky-side{left:0;background:var(--color-white)}
.sticky-left .slide-content{margin:0 auto}
.sticky-right .sticky-side{right:0;background:var(--color-white)}
.sticky-right .slide-content{margin:0 auto}

.sticky-slides-image .slide-image{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 1s cubic-bezier(0.16,1,0.3,1);z-index:-1}
.sticky-slides-image .sticky-slide::before{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.85) 0%,rgba(0,0,0,0.3) 40%,transparent 100%);z-index:0}
.sticky-slides-image .sticky-slide-title::before{display:none}
.sticky-slide-title{display:none}
.slide-content-overlay{position:relative;z-index:1}
.slide-content-overlay .slide-title{color:var(--color-white)}
.slide-content-overlay .slide-text{color:rgba(255,255,255,0.9)}

.social-links{display:flex;flex-wrap:wrap;gap:var(--spacing-md)}
.social-link{font-size:var(--text-base);font-weight:var(--font-medium);color:var(--color-black);text-decoration:none;padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--color-gray-300);border-radius:var(--radius-full);transition:all var(--transition-fast)}
.social-link:hover{color:var(--color-blue);border-color:var(--color-blue)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:0.75rem 1.5rem;font-size:var(--text-base);font-weight:var(--font-medium);border-radius:var(--radius-full);transition:all 300ms ease;cursor:pointer;min-height:48px;text-decoration:none;border:none;outline:none}
.btn-primary{background-color:var(--color-blue);color:var(--color-white)}
.btn-primary:hover{background-color:#0052CC}

.ending-section{min-height:60vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:var(--spacing-3xl);background:linear-gradient(to bottom,var(--color-white) 0%,#F8FAFF 100%)}
.ending-content{max-width:600px}
.ending-text{font-size:var(--text-2xl);font-weight:var(--font-bold);color:var(--color-black);margin-bottom:var(--spacing-lg);letter-spacing:-0.01em}
.ending-subtext{font-size:var(--text-lg);color:var(--color-gray-500);line-height:1.7}
@media(min-width:768px){.ending-text{font-size:var(--text-3xl)}}

.font-transition{transition:opacity 0.6s cubic-bezier(0.4,0,0.2,1),filter 0.6s cubic-bezier(0.4,0,0.2,1),transform 0.6s cubic-bezier(0.4,0,0.2,1);opacity:1;filter:blur(0);transform:scale(1)}
body.fonts-loaded .font-transition{animation:fontDropIn 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards}
@keyframes fontDropIn{0%{opacity:0.6;filter:blur(2px);transform:scale(0.98)}50%{opacity:0.85;filter:blur(1px);transform:scale(0.99)}100%{opacity:1;filter:blur(0);transform:scale(1)}}
body.fonts-loaded .hero-title,body.fonts-loaded .section-title,body.fonts-loaded .slide-title{font-family:'Noto Sans SC',-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Helvetica Neue',Arial,sans-serif}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .animate-on-scroll{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}
}