/* Reset / baseline */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  background: #fff; /* neutral backdrop behind the frame */
  overflow: hidden; /* scrolling logic comes later */
}

/* Viewport acts as a stable canvas */
#viewport {
  position: fixed;
  inset: 0;
}

/* Persistent outer frame */
#frame {
  position: absolute;
  isolation: isolate; 
  inset: 3vh 3vh; /* consistent margin from viewport edges */

  background: #fff;
  border-radius: 12px;

  overflow: hidden; /* content stays clipped to frame */
  font-family: 'San Francisco', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Root container for all sections */
#content-root {
  width: 100%;
  height: 100%;

  position: relative;
}

/* –––––––––––– Section controll

/* Section baseline */
.section {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
}


/* –––––––––––––– Transition Style
/* Transition mask */
#transition-mask{
  position: absolute;
  inset: 0;
  background: #fff;          /* was black */
  opacity: 0;
  pointer-events: none;
  transition: opacity 900ms ease;  /* longer (adjust as desired) */
  z-index: 30;               /* above content/nav while fading */
}

#transition-label {
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  font: inherit;
  font-weight: 400;
  font-size: medium;

  color: rgba(0, 0, 0, 0.75);

  opacity: 0;
  transition: opacity 250ms ease;

  pointer-events: none;
  text-align: center;
}


/* Section visibility states */
.section {
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}

.section.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* ––––––––––––––––– Additions
/* Subtle frame elevation */
#frame {
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.25),
    0 1px 0 rgba(255, 255, 255, 0.05) inset;
}

/* Slightly softer corners at larger sizes */
@media (min-width: 900px) {
  #frame {
    border-radius: 20px;
  }
}

/* Content root baseline */
#content-root {
  background: transparent;
}

/* Section baseline refinement */
.section {
  will-change: opacity;
}





/* Global title path label (inside frame, top-left) */
#frameTitlePath {
  position: absolute;
  top: 30px;
  left: var(--nav-right, 35px);

  z-index: 21; /* above content; below dropdown overlay */
  pointer-events: none;

  font-weight: 200;
  font-size: xx-large;
  letter-spacing: 0.2px;
}

/* Title theme variants (match nav behavior) */
#frameTitlePath.theme-light { color: #000; opacity: 1; }
#frameTitlePath.theme-dark { color: #fff; opacity: 1; }
#frameTitlePath.theme-transparent { color: #fff; opacity: 0.45; }

/* Mobile: keep it aligned with nav's mobile inset */
@media (max-width: 920px) {
  #frameTitlePath {
    top: 17px;
    left: 12px;
    font-size: 20px;
  }
}



/* Creative hook*/ 

/* Frame background layer (behind content, inside frame) */
#frame-bg-layer {
  position: absolute;
  inset: 0;
  z-index: 1; /* ABOVE ambient */
  pointer-events: none;
  opacity: 0;
  transition: opacity 260ms ease;
}


/* Two sub-layers */
#frame-bg-layer .bg-blur,
#frame-bg-layer .bg-main {
  position: absolute;
  inset: 0;
}

/* Blurred fill layer */
#frame-bg-layer .bg-blur {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  filter: blur(28px);
  transform: scale(1.08); /* avoid blur edges showing */
  opacity: 0.9;
}

/* Foreground layer uses an <img> for precise contain/cover */
#frame-bg-layer .bg-main img {
  width: 100%;
  height: 100%;
  display: block;

  object-position: center;
  object-fit: cover; /* default (landscape) */
}

/* Portrait: keep full height, no crop */
/* Use contain whenever we decide the image should be fully visible */
#frame-bg-layer.fit-contain .bg-main img {
  object-fit: contain;
}

/* Ensure content stays above background */
#content-root {
  position: relative;
  z-index: 1;
}

/**  ambient BACKGROUND. */

/* Ambient frame background (default for non-home sections) */
#frame-ambient-layer {
  position: absolute;
  inset: 0;
  z-index: 0; /* lowest */
  pointer-events: none;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  filter: blur(28px);
  transform: scale(1.08);
  opacity: 0;
  transition: opacity 260ms ease;
}


#content-root {
  position: relative;
  z-index: 2;
}