/* ==========================================================================
   Özge Çinko — shared styles
   Design tokens, layout primitives and components used across every page.
   ========================================================================== */

:root{
  /* palette */
  --space:#04060E;
  --star:#EAF2FF;
  --gold:#F5C97B;
  --cyan:#9FD2EF;
  --violet:#C9ABF7;
  --teal:#8FE0CE;
  --dim:rgba(234,242,255,.6);
  --line:rgba(159,210,239,.2);

  /* surfaces */
  --panel:rgba(7,10,22,.72);
  --panel-strong:rgba(7,10,22,.86);

  /* type */
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Poppins',system-ui,-apple-system,sans-serif;

  /* rhythm */
  --pad:clamp(18px,3.5vw,42px);
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{margin:0;padding:0;box-sizing:border-box}

html,body{height:100%;background:var(--space)}
body{
  font-family:var(--sans);
  color:var(--star);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* --------------------------------------------------------------- backdrop */
#cosmos{position:fixed;inset:0;display:block}

.vignette{
  position:fixed;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%,transparent 55%,rgba(2,3,8,.75) 100%);
}

/* Page transition veil. Inner pages start opaque and fade to `.off`;
   the home page starts transparent and fades in with `.on`. */
#fade{
  position:fixed;inset:0;z-index:60;
  background:var(--space);pointer-events:none;
  transition:opacity .9s ease;
}
#fade.off{opacity:0}

/* ----------------------------------------------------------------- layout */
/* Absolute (not fixed): a fixed layer would create its own stacking context
   and trap the masthead below full-screen overlays such as the reader. */
.overlay{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  padding:var(--pad);
  pointer-events:none;
}
.overlay a,
.overlay button{pointer-events:auto}

header{display:flex;align-items:center;gap:14px;flex-shrink:0}

.sigil{
  display:flex;align-items:center;gap:13px;
  text-decoration:none;color:inherit;
  opacity:0;animation:rise 1.2s var(--ease) .4s forwards;
}
.sigil-mark{
  width:40px;height:40px;flex-shrink:0;object-fit:contain;
  filter:drop-shadow(0 0 12px rgba(245,201,123,.35));
}
.sigil .name{
  font-family:var(--serif);font-style:italic;font-weight:600;
  font-size:21px;letter-spacing:.04em;color:var(--star);
}

/* ------------------------------------------------------------- page intro */
.eyebrow{
  display:flex;align-items:center;gap:14px;
  font-size:10.5px;letter-spacing:.44em;text-transform:uppercase;font-weight:400;
  color:var(--gold);margin-bottom:10px;
  opacity:0;animation:rise 1.1s var(--ease) .6s forwards;
}
.eyebrow::before{
  content:"";width:32px;height:1px;
  background:linear-gradient(90deg,var(--gold),transparent);
}

.page-title{
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(22px,2.5vw,36px);color:var(--star);
  text-shadow:0 2px 24px rgba(2,4,10,.9);
  opacity:0;animation:rise 1.1s var(--ease) .8s forwards;
}

/* --------------------------------------------------------- hamburger menu */
.menu-btn{
  position:fixed;top:calc(var(--pad) - 7px);right:var(--pad);z-index:90;
  width:46px;height:46px;border-radius:50%;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:rgba(4,6,14,.42);border:1px solid rgba(245,201,123,.32);
  backdrop-filter:blur(4px);
  transition:border-color .35s,box-shadow .35s,background .35s;
  opacity:0;animation:rise 1.2s var(--ease) .6s forwards;
}
.menu-btn:hover,
.menu-btn:focus-visible{
  border-color:rgba(245,201,123,.62);
  box-shadow:0 0 26px rgba(245,201,123,.18);
}
.menu-btn span{
  display:block;width:17px;height:1.4px;border-radius:2px;background:var(--gold);
  transition:transform .4s var(--ease),opacity .3s;
}
body.menu-open .menu-btn span:nth-child(1){transform:translateY(6.4px) rotate(45deg)}
body.menu-open .menu-btn span:nth-child(2){opacity:0}
body.menu-open .menu-btn span:nth-child(3){transform:translateY(-6.4px) rotate(-45deg)}

.site-nav{
  position:fixed;inset:0;z-index:80;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(6px,1.6vh,14px);
  background:rgba(4,6,14,.88);backdrop-filter:blur(11px);
  opacity:0;pointer-events:none;transition:opacity .45s ease;
}
body.menu-open .site-nav{opacity:1;pointer-events:auto}
.site-nav a{
  position:relative;padding:4px 10px;text-decoration:none;
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(28px,4.2vw,46px);line-height:1.3;
  color:rgba(234,242,255,.7);
  opacity:0;transform:translateY(16px);
  transition:color .35s,opacity .5s ease,transform .5s var(--ease);
}
body.menu-open .site-nav a{opacity:1;transform:translateY(0)}
body.menu-open .site-nav a:nth-child(1){transition-delay:.05s}
body.menu-open .site-nav a:nth-child(2){transition-delay:.11s}
body.menu-open .site-nav a:nth-child(3){transition-delay:.17s}
body.menu-open .site-nav a:nth-child(4){transition-delay:.23s}
body.menu-open .site-nav a:nth-child(5){transition-delay:.29s}
.site-nav a::after{
  content:"";position:absolute;left:50%;bottom:0;width:0;height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  transition:width .4s var(--ease);
}
.site-nav a:hover,
.site-nav a:focus-visible{color:var(--star)}
.site-nav a:hover::after,
.site-nav a:focus-visible::after{width:82%}
.site-nav a[aria-current="page"]{color:var(--gold)}
.site-nav a[aria-current="page"]::after{width:52%}

/* --------------------------------------------------- page hand-off veil */
/* Shown while travelling between pages: the destination's constellation
   blooms in gold before the veil closes. */
.transition{
  position:fixed;inset:0;z-index:70;
  display:grid;place-items:center;
  opacity:0;pointer-events:none;
  transition:opacity .55s ease;
}
.transition.is-active{opacity:1}

.transition-figure{
  width:min(48vh,420px);height:min(64vh,560px);
  background:linear-gradient(170deg,#FBEAC6,#F5C97B 55%,#E0A85C);
  -webkit-mask:var(--figure) center/contain no-repeat;
  mask:var(--figure) center/contain no-repeat;
  filter:drop-shadow(0 0 46px rgba(245,201,123,.35));
  transform:scale(.86);opacity:0;
  transition:transform 1.1s var(--ease),opacity .6s ease;
}
.transition.is-active .transition-figure{transform:scale(1.04);opacity:.95}

.transition-mark{
  width:auto;height:min(58vh,520px);max-width:80vw;object-fit:contain;
  filter:drop-shadow(0 0 46px rgba(245,201,123,.35));
  transform:scale(.86);opacity:0;
  transition:transform 1.1s var(--ease),opacity .6s ease;
}
.transition.is-active .transition-mark{transform:scale(1.04);opacity:1}

/* ------------------------------------------------------------- components */
.pill{
  display:inline-flex;align-items:center;gap:8px;
  font-size:9px;letter-spacing:.18em;text-transform:uppercase;font-weight:400;
  color:var(--cyan);text-decoration:none;
  border:1px solid rgba(159,210,239,.35);border-radius:999px;
  padding:6px 13px;
  transition:color .3s,background .3s,border-color .3s,box-shadow .3s;
}
.pill:hover,
.pill:focus-visible{
  color:var(--gold);border-color:rgba(245,201,123,.45);
  background:rgba(245,201,123,.08);
  box-shadow:0 0 18px rgba(245,201,123,.15);
}

.scroll-pane{
  overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:rgba(159,210,239,.25) transparent;
}
.scroll-pane::-webkit-scrollbar{width:4px}
.scroll-pane::-webkit-scrollbar-thumb{background:rgba(159,210,239,.25);border-radius:4px}

/* ------------------------------------------------------------- animations */
@keyframes rise{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes shimmer{
  0%,100%{background-position:0% 0}
  50%{background-position:100% 0}
}

.shimmer-text{
  background:linear-gradient(105deg,var(--star) 30%,var(--gold) 55%,var(--star) 80%);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:shimmer 7s ease-in-out infinite;
}

/* ---------------------------------------------------------------- a11y/UX */
@media (max-width:720px){
  .sigil .name{font-size:19px}
  .sigil-mark{width:34px;height:34px}
  .menu-btn{width:42px;height:42px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .sigil,.eyebrow,.page-title,.menu-btn{opacity:1}
  .shimmer-text{-webkit-text-fill-color:var(--star)}
}

/* ==========================================================================
   Day mode — a sunlit sea instead of a night sky.
   Layout never moves: only colour, surface and symbol change.
   ========================================================================== */

/* The gradient stands in for the sea before (or without) WebGL. */
[data-theme="light"] body{
  background:linear-gradient(180deg,
    #4AAFC3 0%, #50C0CC 18%, #68D2D3 38%, #8FE0D9 58%,
    #C4EEE3 74%, #E4F3E9 84%, #F1E8D8 93%, #FAF4E8 100%);
}

[data-theme="light"]{
  --space:#DDEFF7;
  --star:#12354B;
  --gold:#B5761C;
  --cyan:#2A7EA6;
  --violet:#6A5CA6;
  --teal:#1E7F6C;
  --dim:rgba(18,53,75,.82);
  --line:rgba(18,53,75,.2);
  --panel:rgba(255,255,255,.78);
  --panel-strong:rgba(255,255,255,.90);
}

/* A breath of light over the water so the type stays readable. */
[data-theme="light"] .vignette{
  background:radial-gradient(ellipse at 50% 45%,transparent 66%,rgba(255,255,255,.22) 100%);
}
[data-theme="light"] .sigil-mark{filter:drop-shadow(0 2px 10px rgba(18,53,75,.18))}
[data-theme="light"] .menu-btn,
[data-theme="light"] .theme-btn{
  background:rgba(255,255,255,.66);border-color:rgba(181,118,28,.4);
}
[data-theme="light"] .menu-btn:hover,
[data-theme="light"] .theme-btn:hover{
  border-color:rgba(181,118,28,.7);box-shadow:0 6px 22px rgba(18,53,75,.16);
}
[data-theme="light"] .site-nav{background:rgba(226,241,248,.93)}
[data-theme="light"] .site-nav a{color:rgba(18,53,75,.68)}
[data-theme="light"] .page-title,
[data-theme="light"] .eyebrow{
  color:rgba(18,53,75,.82);
  text-shadow:0 1px 10px rgba(255,255,255,.85);
}

/* --------------------------------------------------------- theme toggle */
.theme-btn{
  position:fixed;top:calc(var(--pad) - 7px);right:calc(var(--pad) + 58px);z-index:90;
  width:46px;height:46px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;
  background:rgba(4,6,14,.42);border:1px solid rgba(245,201,123,.32);
  backdrop-filter:blur(4px);
  transition:border-color .35s,box-shadow .35s,background .35s;
  opacity:0;animation:rise 1.2s var(--ease) .7s forwards;
}
.theme-btn:hover,
.theme-btn:focus-visible{
  border-color:rgba(245,201,123,.62);box-shadow:0 0 26px rgba(245,201,123,.18);
}
.theme-btn svg{
  width:19px;height:19px;grid-area:1/1;
  fill:none;stroke:var(--gold);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
  transition:opacity .35s,transform .5s var(--ease);
}
.theme-btn .icon-sun{opacity:0;transform:rotate(-40deg) scale(.7)}
.theme-btn .icon-moon{opacity:1;transform:rotate(0) scale(1)}
[data-theme="light"] .theme-btn .icon-sun{opacity:1;transform:rotate(0) scale(1)}
[data-theme="light"] .theme-btn .icon-moon{opacity:0;transform:rotate(40deg) scale(.7)}

/* Sunrise / nightfall: close the veil, then the page reloads into the new sky. */
body.theme-changing #fade,
body.theme-changing #fade.off{opacity:1;transition:opacity .55s ease}

@media (max-width:720px){
  .theme-btn{width:42px;height:42px;right:calc(var(--pad) + 50px)}
  .theme-btn svg{width:17px;height:17px}
}