/* ==========================================================================
   GAZE JEWELLERY — Horizontal Accordion Cover Page
   Cross-browser: Chrome + Safari (WebKit)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CUSTOM FONT
   -------------------------------------------------------------------------- */
@font-face { font-family:'The Seasons'; src:url('../assets/fonts/TheSeasons-Lt.otf') format('opentype'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'The Seasons'; src:url('../assets/fonts/TheSeasons-LtIt.otf') format('opentype'); font-weight:300; font-style:italic; font-display:swap; }
@font-face { font-family:'The Seasons'; src:url('../assets/fonts/TheSeasons-Reg.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'The Seasons'; src:url('../assets/fonts/TheSeasons-It.otf') format('opentype'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'The Seasons'; src:url('../assets/fonts/TheSeasons-Bd.otf') format('opentype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'The Seasons'; src:url('../assets/fonts/TheSeasons-BdIt.otf') format('opentype'); font-weight:700; font-style:italic; font-display:swap; }

/* --------------------------------------------------------------------------
   2. CSS CUSTOM PROPERTIES
   -------------------------------------------------------------------------- */
:root {
  --font-display: 'The Seasons', Georgia, serif;
  --font-body: 'The Seasons', Helvetica, Arial, sans-serif;
  --panel-label-size: clamp(1.8rem, 3.5vw, 4.5rem);
  --panel-label-vertical-size: clamp(0.75rem, 1vw, 1rem);
  --color-bg: #0A0A0A;
  --color-white: #FFFFFF;
  --color-white-muted: rgba(255,255,255,0.6);
  --color-brand: rgba(255,255,255,0.45);
  --color-black: #000000;
}

/* --------------------------------------------------------------------------
   3. RESET & BASE
   -------------------------------------------------------------------------- */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html,body { width:100vw; height:100vh; height:100dvh; overflow:hidden; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
body { font-family:var(--font-body); background-color:var(--color-bg); color:var(--color-white); position:relative; }
a { text-decoration:none; color:inherit; cursor:pointer; }

/* --------------------------------------------------------------------------
   4. INTRO OVERLAY
   -------------------------------------------------------------------------- */
#intro-overlay {
  position:fixed; top:0; left:0; right:0; bottom:0; z-index:9999;
  background:#000000;
  display:-webkit-box; display:-webkit-flex; display:flex;
  -webkit-box-align:center; -webkit-align-items:center; align-items:center;
  -webkit-box-pack:center; -webkit-justify-content:center; justify-content:center;
  opacity:1;
  -webkit-transition:opacity 0.8s cubic-bezier(0.25,0.1,0.25,1);
  transition:opacity 0.8s cubic-bezier(0.25,0.1,0.25,1);
}
#intro-overlay.fade-out { opacity:0; pointer-events:none; }
#intro-overlay.hidden { display:none; pointer-events:none; }

.intro-text {
  font-family:'The Seasons',Georgia,serif;
  font-size:clamp(1.2rem,3.33vw,4rem);
  font-weight:400; color:#FFFFFF; letter-spacing:0.12em;
  opacity:0; line-height:1;
  -webkit-user-select:none; user-select:none; white-space:nowrap;
}

@-webkit-keyframes smoothFadeIn { from{opacity:0} to{opacity:1} }
@keyframes smoothFadeIn { from{opacity:0} to{opacity:1} }
@-webkit-keyframes smoothFadeOut { from{opacity:1} to{opacity:0} }
@keyframes smoothFadeOut { from{opacity:1} to{opacity:0} }

.intro-text.fade-in {
  -webkit-animation:smoothFadeIn 0.6s ease-in-out forwards;
  animation:smoothFadeIn 0.6s ease-in-out forwards;
}
.intro-text.fade-out {
  -webkit-animation:smoothFadeOut 0.5s ease-in-out forwards;
  animation:smoothFadeOut 0.5s ease-in-out forwards;
}

/* --------------------------------------------------------------------------
   5. MAIN PAGE
   -------------------------------------------------------------------------- */
#main-page {
  width:100vw; height:100vh; height:100dvh; overflow:hidden; position:relative;
  display:-webkit-box; display:-webkit-flex; display:flex;
  -webkit-box-orient:horizontal; -webkit-box-direction:normal;
  -webkit-flex-direction:row; flex-direction:row;
  opacity:0;
  -webkit-transition:opacity 0.6s ease 0.1s;
  transition:opacity 0.6s ease 0.1s;
}
#main-page.visible { opacity:1; }

/* --------------------------------------------------------------------------
   6. PANEL
   -------------------------------------------------------------------------- */
.panel {
  -webkit-box-flex:1; -webkit-flex:1; flex:1;
  position:relative;
  display:-webkit-box; display:-webkit-flex; display:flex;
  -webkit-box-pack:center; -webkit-justify-content:center; justify-content:center;
  -webkit-box-align:center; -webkit-align-items:center; align-items:center;
  -webkit-transition:-webkit-flex 0.55s cubic-bezier(0.16,1,0.3,1), -webkit-flex-grow 0.55s cubic-bezier(0.16,1,0.3,1);
  transition:flex 0.55s cubic-bezier(0.16,1,0.3,1), flex-grow 0.55s cubic-bezier(0.16,1,0.3,1);
  overflow:hidden;
}

.panel-bg {
  position:absolute; top:0; left:0; right:0; bottom:0;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  z-index:1;
}

.panel-overlay {
  position:absolute; top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,0.08);
  -webkit-transition:background 0.5s cubic-bezier(0.16,1,0.3,1);
  transition:background 0.5s cubic-bezier(0.16,1,0.3,1);
  z-index:2;
}

.panel:not(:last-child) .panel-overlay::after {
  content:''; position:absolute; right:0; top:0; bottom:0;
  width:1px; background:rgba(255,255,255,0.07); pointer-events:none;
}

.panel.expanded .panel-overlay { background:rgba(0,0,0,0.0); }
.panel.compressed .panel-overlay { background:rgba(0,0,0,0.50); }

/* --------------------------------------------------------------------------
   7. PER-PANEL BRAND
   -------------------------------------------------------------------------- */
.panel-brand-header,.panel-brand-footer {
  position:absolute; z-index:4; left:50%;
  -webkit-transform:translateX(-50%); transform:translateX(-50%);
  color:rgba(255,255,255,0.45);
  -webkit-user-select:none; user-select:none;
  pointer-events:none; white-space:nowrap;
  text-shadow:0 1px 6px rgba(0,0,0,0.4);
  opacity:0;
  -webkit-transition:opacity 0.3s cubic-bezier(0.16,1,0.3,1);
  transition:opacity 0.3s cubic-bezier(0.16,1,0.3,1);
}
.panel-brand-header { font-family:'The Seasons',Georgia,serif; font-size:clamp(1rem,1.5vw,1.8rem); font-weight:400; letter-spacing:0.05em; top:clamp(1.5rem,3vh,2.5rem); }
.panel-brand-footer { font-family:'The Seasons',Helvetica,Arial,sans-serif; font-size:clamp(0.7rem,0.9vw,1rem); font-weight:300; letter-spacing:0.1em; bottom:clamp(1.5rem,3vh,2.5rem); }

.panel.expanded .panel-brand-header,
.panel.expanded .panel-brand-footer { opacity:1; }

/* --------------------------------------------------------------------------
   8. GLOBAL BRAND
   -------------------------------------------------------------------------- */
@-webkit-keyframes brandIn { from{opacity:0} to{opacity:1} }
@keyframes brandIn { from{opacity:0} to{opacity:1} }

.global-brand-header,.global-brand-footer {
  position:fixed; z-index:100; left:50%;
  -webkit-transform:translateX(-50%); transform:translateX(-50%);
  color:rgba(255,255,255,0.45);
  -webkit-user-select:none; user-select:none;
  pointer-events:none; white-space:nowrap;
  text-shadow:0 1px 6px rgba(0,0,0,0.35);
  opacity:0;
  -webkit-transition:opacity 0.3s cubic-bezier(0.16,1,0.3,1);
  transition:opacity 0.3s cubic-bezier(0.16,1,0.3,1);
}
.global-brand-header { font-family:'The Seasons',Georgia,serif; font-size:clamp(1rem,1.5vw,1.8rem); font-weight:400; letter-spacing:0.05em; top:clamp(1.5rem,3vh,2.5rem); }
.global-brand-footer { font-family:'The Seasons',Helvetica,Arial,sans-serif; font-size:clamp(0.7rem,0.9vw,1rem); font-weight:300; letter-spacing:0.1em; bottom:clamp(1.5rem,3vh,2.5rem); }

#main-page.visible ~ .global-brand-header,
#main-page.visible ~ .global-brand-footer {
  -webkit-animation:brandIn 0.8s ease 0.6s forwards;
  animation:brandIn 0.8s ease 0.6s forwards;
}
body.has-active .global-brand-header,
body.has-active .global-brand-footer {
  -webkit-animation:none !important; animation:none !important;
  opacity:0 !important;
  -webkit-transition:opacity 0.2s ease; transition:opacity 0.2s ease;
}

/* --------------------------------------------------------------------------
   9. HITBOX
   -------------------------------------------------------------------------- */
.panel-hitbox {
  position:relative; z-index:3; width:100%; height:40vh;
  display:-webkit-box; display:-webkit-flex; display:flex;
  -webkit-box-pack:center; -webkit-justify-content:center; justify-content:center;
  -webkit-box-align:center; -webkit-align-items:center; align-items:center;
  cursor:pointer;
}

/* --------------------------------------------------------------------------
   10. PANEL CONTENT & LABELS
   -------------------------------------------------------------------------- */
.panel-content {
  position:relative;
  display:-webkit-box; display:-webkit-flex; display:flex;
  -webkit-box-pack:center; -webkit-justify-content:center; justify-content:center;
  -webkit-box-align:center; -webkit-align-items:center; align-items:center;
  padding:1rem; pointer-events:none;
}

.label-horizontal {
  position:relative;
  font-family:'The Seasons',Georgia,serif; font-size:var(--panel-label-size); color:#FFFFFF;
  font-weight:400; letter-spacing:0.03em; white-space:nowrap;
  text-shadow:0 2px 20px rgba(0,0,0,0.4), 0 1px 6px rgba(0,0,0,0.3);
  -webkit-transform:translateY(0); transform:translateY(0);
  -webkit-transition:opacity 0.3s cubic-bezier(0.16,1,0.3,1), -webkit-transform 0.2s ease, text-shadow 0.2s ease;
  transition:opacity 0.3s cubic-bezier(0.16,1,0.3,1), transform 0.2s ease, text-shadow 0.2s ease;
}

.label-vertical {
  position:absolute;
  font-family:'The Seasons',Helvetica,Arial,sans-serif; font-size:var(--panel-label-vertical-size);
  font-weight:300; color:rgba(255,255,255,0.6);
  letter-spacing:0.25em; text-transform:uppercase; white-space:nowrap;
  writing-mode:vertical-rl; text-orientation:mixed;
  opacity:0; text-shadow:0 1px 8px rgba(0,0,0,0.5); pointer-events:none;
  -webkit-transition:opacity 0.3s cubic-bezier(0.16,1,0.3,1);
  transition:opacity 0.3s cubic-bezier(0.16,1,0.3,1);
}

.panel-hitbox:hover .label-horizontal {
  -webkit-transform:translateY(-4px); transform:translateY(-4px);
  text-shadow:0 4px 30px rgba(255,255,255,0.15), 0 2px 20px rgba(0,0,0,0.4);
}

/* --------------------------------------------------------------------------
   11. HOVER STATES
   -------------------------------------------------------------------------- */
.panel.expanded .label-horizontal { opacity:1; }
.panel.expanded .label-vertical { opacity:0; }
.panel.compressed .label-horizontal { position:absolute; opacity:0; pointer-events:none; }
.panel.compressed .label-vertical { position:relative; opacity:1; }

/* --------------------------------------------------------------------------
   12. PANEL ENTRANCE ANIMATION
   -------------------------------------------------------------------------- */
.panel-bg {
  opacity:0;
  -webkit-transform:scaleX(0.95); transform:scaleX(0.95);
}

@-webkit-keyframes panelIn {
  from { opacity:0; -webkit-transform:scaleX(0.95); transform:scaleX(0.95); }
  to { opacity:1; -webkit-transform:scaleX(1); transform:scaleX(1); }
}
@keyframes panelIn {
  from { opacity:0; -webkit-transform:scaleX(0.95); transform:scaleX(0.95); }
  to { opacity:1; -webkit-transform:scaleX(1); transform:scaleX(1); }
}

#main-page.visible .panel-bg {
  -webkit-animation:panelIn 0.8s cubic-bezier(0.25,0.1,0.25,1) forwards;
  animation:panelIn 0.8s cubic-bezier(0.25,0.1,0.25,1) forwards;
}
#main-page.visible .panel:nth-child(1) .panel-bg { -webkit-animation-delay:0.05s; animation-delay:0.05s; }
#main-page.visible .panel:nth-child(2) .panel-bg { -webkit-animation-delay:0.15s; animation-delay:0.15s; }
#main-page.visible .panel:nth-child(3) .panel-bg { -webkit-animation-delay:0.25s; animation-delay:0.25s; }
#main-page.visible .panel:nth-child(4) .panel-bg { -webkit-animation-delay:0.35s; animation-delay:0.35s; }

/* --------------------------------------------------------------------------
   13. CURSOR ACCENT
   -------------------------------------------------------------------------- */
.cursor-dot {
  position:fixed; width:6px; height:6px; border-radius:50%; background:#FFFFFF;
  pointer-events:none; z-index:9998; opacity:0;
  -webkit-transition:opacity 0.3s ease; transition:opacity 0.3s ease;
  -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%);
  mix-blend-mode:difference;
}
body:hover .cursor-dot { opacity:1; }

/* --------------------------------------------------------------------------
   14. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width:1024px) {
  :root { --panel-label-size:clamp(1.5rem,3.5vw,3rem); --panel-label-vertical-size:clamp(0.65rem,0.9vw,0.85rem); }
}
@media (max-width:768px) {
  :root { --panel-label-size:clamp(1.3rem,5vw,2rem); --panel-label-vertical-size:clamp(0.55rem,2vw,0.75rem); }
  #main-page { -webkit-box-orient:vertical; -webkit-box-direction:normal; -webkit-flex-direction:column; flex-direction:column; }
  .panel:not(:last-child) .panel-overlay::after { right:auto; bottom:0; left:0; top:auto; width:100%; height:1px; background:rgba(255,255,255,0.07); }
  .label-vertical { writing-mode:horizontal-tb; text-orientation:initial; font-size:clamp(0.6rem,2.5vw,0.8rem); letter-spacing:0.15em; }
  .panel-brand-header,.global-brand-header { top:clamp(0.6rem,1.5vh,1rem); }
  .panel-brand-footer,.global-brand-footer { bottom:clamp(0.6rem,1.5vh,1rem); }
}
@media (max-width:480px) {
  :root { --panel-label-size:clamp(1.1rem,5vw,1.6rem); }
}