/**************/
/** BASE CSS **/
/**************/


/* base styles */
body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  transition: background 0.5s;
  /* no background color here so wrapper controls it */
}

/* prevent horizontal scrolling (allowing trees to be partially in view) */
html, body {
  overflow-x: hidden;
}

header {
  text-align: center;
  padding: 1em;
  background: #222;
  color: white;
  font-size: 1.5rem;
}

main {
  padding: 0 2em;
  max-width: 1130px;
  margin: 0 auto;
}

@font-face {
  font-family: 'Mansalva-Regular';
  src: url('./Mansalva-Regular.ttf') format('woff2');
}

header h1 {
  font-size: 1.5rem;     /* smaller than normal text */
  font-weight: normal;
  margin: 0;
  line-height: 1;
  letter-spacing: normal;
}




/* encapsulates entire season */
.season {
  position: relative;
  width: 100%;
  margin-bottom: 2em;
}

/* graphics inside season */
.season-assets {
  position: relative;
  width: 100%;
}











/* ╔═════════════════════════════════════════════════════════════════════════╗ */
/* ║                            POP-UP BOX                                   ║ */
/* ╚═════════════════════════════════════════════════════════════════════════╝ */


/* Popups */
.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1em;
  box-sizing: border-box;
}

.popup:target {
  display: flex;
}

.popup-content {
  border-radius: 10px;
  border: 2px solid white;
  padding: 1em;
  max-width: 90%;
  max-height: 80%;
  overflow: auto;
  position: relative;
  box-sizing: border-box;
}

@media (prefers-color-scheme: dark) {
  .popup-content {
    border-color: black;
  }
}

.popup .close {
  position: absolute;
  top: 0.5em;
  right: 1em;
  font-size: 1.5em;
  cursor: pointer;
  text-decoration: none;
  color: black;
  font-weight: bold;
}

.popup .close:hover,
.popup .close:focus {
  color: #333;
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

.popup:target .close:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

/* popup : screen reader hidden helper */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}





/* Responsive */
@media (max-width: 768px) {
  .season {
    flex-direction: column;
    align-items: center;
  }

  .info-box {
    width: 90%;
  }

  .season-toggle label {
    flex: 1 1 45%;
    text-align: center;
  }

  .graphic {
    max-width: 90vw;
  }
}

@media (min-width: 769px) {
  .season-toggle label {
    flex: 0 0 auto;
  }
}





.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}







/* four image montage : leading to carousels  */
.collage-box {
  background-color: transparent;
}

.collage-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center; /* optional: centers the montage */
}

.collage-grid img {
  width: auto;
  height: auto;
  max-width: 100%; /* Prevents overflow */
  max-height: 100%; /* Optional for limiting height */
  border-radius: 4px;
  cursor: pointer;
  display: block;
  object-fit: contain; /* ensures image is not cropped */
}

.collage-grid img:hover {
  outline: 2.5px dashed rgba(0, 0, 0, 0.2); /* start transparent */
  outline-offset: 0;
  animation: pulse-outline-opacity 1.5s ease-in-out infinite;
}

/* workaround for phone devices as the dashed box is cut off in portrait orientation */
/* fixme : WebKit bug won't show vertical lines on >iPhone X */
.collage-highlight-first img {
  outline: 2.5px dashed rgba(0, 0, 0, 0.2); /* start transparent */
  outline-offset: -5px; /* pull the outline inward */
  animation: pulse-outline-opacity 1.5s ease-in-out infinite;
  box-sizing: border-box; /* ensures offset behaves predictably */
}

























/* ╔═════════════════════════════════════════════════════════════════════════╗ */
/* ║                        INFO BOX                                         ║ */
/* ╚═════════════════════════════════════════════════════════════════════════╝ */


.info-box {
  border: 2px solid black;
  border-radius: 15px;
  background: transparent;
  max-width: 900px;
  margin: 1.5em auto;
  text-align: center;
  position: relative;
  overflow: visible; /* allow scenery decoration to overflow outside */
}


/* place scenery decoration inside here */
.layered-container {
  position: relative;
  min-height: 0px;
  width: 100%;
}

.layered-container img {
  position: absolute;
  top: var(--y, 0);
  left: var(--x, 0);
  z-index: var(--z, 1);
}

/* Make the image stretch to full width, touching the box edges */
.edge-image {
  display: block;
  width: 100%;
  height: auto;
}

.info-box p,
.info-box ul {
  padding: 1em;
  margin: 0;
  font-family: 'Mansalva-Regular', sans-serif;
  font-size: 1.4rem;
}

.info-box h2 {
  color: white;
  background-color: #222;
  border-radius: 10px 10px 0 0; /* TL, TR, BR, BL */
  padding: 1em;
  margin: 0;
  display: block; /* default for h2, stretches full width */
}

.layered-container::before {
  content: '';
  display: block;
  /* height: 230px; /* Same as min-height; covers max bottom position of images */
}

/* dynamic graphic placement around info boxes */
.info-box-wrapper {
  position: relative;
  width: 75%;
  max-width: 900px;
  margin: 3rem auto;
  min-height: var(--diorama-height, 0); /* fallback 0 */
  overflow: visible; /* allow graphics to leak out of box borders */
}



/* graphics */
.graphic {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  border: 2px solid transparent;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

/* background graphic (red brick wall) */
.graphic.base {
  position: relative;
  z-index: 1;
}

/* graphics layered over 'base' graphic (diorama) */
.graphic.overlay {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(var(--x, 0), var(--y, 0)) scaleX(var(--scaleX, 1)) scale(var(--scale, 1));
  z-index: 2;
}

/* flip graphic (horizontally) */
.graphic.overlay.flipped {
  --scaleX: -1;
}



.info-box-dynamic {
  position: relative;
  z-index: 10;  /* below graphics */
  border: 2px solid black;
  border-radius: 15px;
  background: transparent;
  padding: 2rem;
  text-align: center;
  min-height: 250px;
  background: transparent;
  overflow: visible;
}

.info-box-dynamic p,
.info-box-dynamic ul {
  padding: 1em;
  margin: 0;
  font-family: 'Mansalva-Regular', sans-serif;
  font-size: 1.4rem;
}

.info-box-dynamic h2 {
  color: white;
  background-color: #222;
  border-radius: 10px 10px 0 0; /* TL, TR, BR, BL */
  padding: 1em;
  margin: 0;
  display: block; /* default for h2, stretches full width */
}

/* bottom aligned to top of info box and centered */
.graphic-dynamic {
  position: absolute;
  bottom: 100%;         /* bottom of image touches top of info box (wrapper) */
  left: 50%;            /* start from horizontal center */
  width: auto;
  max-width: 100%;
  height: auto;
}

/* diorama : above info box */
.info-box-diorama-top {
  position: absolute;
  bottom: 100%; /* bottom edge touches top of info box */
  left: 50%;    /* center horizontally */
  transform: translateX(calc(-50% + var(--x, 0%)))
             translateY(calc(var(--y-base, 0%) + var(--y, 0%)))
             scaleX(var(--scaleX, 1)); /* only flips if --scaleX is overridden */
}

/* diorama : left of info box */
.info-box-diorama-left {
  position:absolute; top:0; left:0;
  /* kill .graphic-dynamic anchoring */
  right:auto; bottom:auto;
  transform:
    translateX(calc(var(--x-base, -100%) + var(--x, 0%)))
    translateY(calc(var(--y-base, -50%)  + var(--y, 0%)));
}

/* diorama : right of info box */
.info-box-diorama-right {
  position:absolute; top:0; right:0;
  /* kill .graphic-dynamic anchoring */
  left:auto; bottom:auto;
  transform:
    translateX(calc(var(--x-base, 100%) + var(--x, 0%)))
    translateY(calc(var(--y-base, -50%) + var(--y, 0%)));
}


/* workaround : flip image requires a reverse scaling due todo
   complex calculation when positioning graphics in info-box-diorama-top */
.flipped2 {
  transform: scaleX(-1);
}


/* create spacing on mobile hardware to display dioramas on top of info-boxes */
.info-box.style-a { margin-top: 0px; border: 0; }
.info-box.style-b { margin-top: 0px; border: 0; }
.info-box.style-c { margin-top: 0px; border: 0; }


/* vertical cascade (use y-BASE so it doesn't get ignored) */
/* nb : vertical placement will not stretch in portrait view if designed
   in horizontal, as more are needed and thus leave blank spaces after exhausted */
.cascade-tree-1 { --y-base: 0%;   }
.cascade-tree-2 { --y-base: 75%;  }
.cascade-tree-3 { --y-base: 150%; }
.cascade-tree-4 { --y-base: 225%; }




/* diorama : header */
.header-diorama {
  position: relative;  /* acts as positioning container for child images */
  width: 100%;         /* span full width of container */
  height: 1000px;      /* default spacing for main desktop diorama */
}

.header-diorama img {
  position: absolute;
  top: var(--y-base, 0%); /* base distance from top of container */
  left: 50%;              /* anchor image at horizontal center */
  transform:
    translateX(calc(-50% + var(--x, 0%))) /* shift left 50% to center, then add custom horizontal offset */
    translateY(var(--y, 0%))              /* apply per-image vertical offset */
    scaleX(var(--scaleX, 1));             /* flip image horizontally if --scaleX = -1, else keep normal */
}

.header-diorama {
  --y-base: 0%; /* default top offset for all images in this container; increase to push content further down (e.g., below title) */
}



/* diorama : footer */
.footer {
  position: relative;   /* establishes a positioning context for absolutely-positioned children */
  height: 300px;        /* defines the "stage" height for the footer area */
  overflow: visible;    /* allows child elements (e.g., images/graphics) to extend outside footer if needed */
}

.footer-image-container {
  position: relative;   /* keeps child elements positioned relative to this container */
  width: 100%;          /* stretch to fill footer width */
  height: 100%;         /* stretch to fill footer height */
}

/* Base anchor for footer graphics
   - starting point is centered horizontally at the bottom of the footer
   - custom properties (--x, --y) allow fine-tuning position offsets dynamically */
.footer-diorama {
  position: absolute;   /* removes element from document flow, positions relative to .footer (or nearest relative ancestor) */
  left: 50%;            /* horizontally anchor to center of footer */
  bottom: 0;            /* vertically anchor to bottom of footer */
  transform:
    translateX(calc(-50% + var(--x, 0%)))   /* shift left by 50% to truly center, then apply optional horizontal offset */
    translateY(calc(var(--y, 0%)));         /* apply optional vertical offset (default 0%) */
}







/* ╔═════════════════════════════════════════════════════════════════════════╗ */
/* ║                                FX                                       ║ */
/* ╚═════════════════════════════════════════════════════════════════════════╝ */



/* Sheeba pixelation trick */
.sheeba-fade {
  position: relative;
  display: inline-block;
}

.sheeba-fade img {
  width: 100%;
  height: auto;
  display: block;
  transition: opacity 0.5s ease;
}

.sheeba-fade .clear {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.sheeba-fade:hover .clear {
  opacity: 1;
}

.sheeba-fade:hover .pixelated {
  opacity: 0;
}



/* make graphic semi-transparent (see objects behind trees) */
.peek {
  transition: opacity 0.3s ease;
}

/* peek effect on press (desktop click or mobile tap) */
.peek:hover {
  opacity: 0.4;
}




/* pulsing effect */
@keyframes pulse-outline-opacity {
  0%, 100% {
    outline-color: rgba(0, 0, 0, 0.2);
  }
  50% {
    outline-color: rgba(0, 0, 0, 1);
  }
}

/* Apply dashed, pulsing outline on hover */
.graphic.highlight-outline:hover {
  outline: 2.5px dashed rgba(0, 0, 0, 0.2); /* start transparent */
  outline-offset: 0;
  animation: pulse-outline-opacity 1.5s ease-in-out infinite;
}



/* centralising text (Skills Employed) */
.centered-list {
  list-style-type: none; /* removes bullets */
  padding: 0;
  margin: 0 auto;        /* centers the list container */
  display: flex;
  flex-direction: column;
  align-items: center;   /* centers the items horizontally */
  text-align: center;    /* centers text inside each item */
}





/* graphics for use on mobile hardware (hidden by default)
nb. useful for all sorts of workarounds */


/* graphics : show */
.desktop-only {             /* show desktop graphics */
  display: block;
}

/* graphics : hide */
.portable-only,             /* hide graphics for portable devices */
.diorama-main-forest,       /* hide top 'forest' intro diorama graphics  */
.phone-portrait-only,       /* hide specific phone portrait graphics */
.phone-landscape-only,      /* hide specific phone landscape graphics */
.tablet-portrait-only,      /* hide specific tablet portrait graphics */
.tablet-landscape-only {    /* hide specific tablet landscape graphics */
  display: none;
}




/* --- --- --- MARKED FOR DISTRUCTION --- --- --- */


/* spring time decoration */
.positioning-barrowSpring {
  --x: 1200px;
  --y: 3700px;
}

.positioning-barrowSummer {
  --x: 1260px;
  --y: 1200px;
}


/* --- --- --- MARKED FOR DISTRUCTION --- --- --- */