/* === Theme Vars === */
:root {
  --dark-purple:#2c2a4a;
  --dark-green:#1e3a3a;
  --bronze:#b08d57;
  --deep-orange:#b08d57;
  --off-white:#e8e8e8;
  --heading-font:'Amarante', serif;                 /* display */
  --body-font:'Gelasio', Georgia, 'Times New Roman', serif; /* body */
}

html{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body{ font-family:var(--body-font); }
:root { --base-size: 18px; }
html  { font-size: var(--base-size); }



h1,h2,h3,h4,.logo,.ampersand,.heading-large{
  font-family:var(--heading-font);
  font-weight:400; /* Amarante has only 400 */
}

/* Reset */
*{margin:0;padding:0;box-sizing:border-box;scroll-behavior:smooth;}
body{font-family:var(--body-font);background:var(--dark-purple) url('star-black2.jpg') fixed center/cover;color:var(--off-white);}

/* Header */
.header{background:rgba(27, 27, 27, 0.8);backdrop-filter:blur(10px);padding:1rem 5%;
  position:fixed;width:100%;top:0;left:0;z-index:1000;display:flex;
  justify-content:space-between;align-items:center; background-image:url(stardust.png);}
.logo{font-family:var(--heading-font);font-size:1.8rem;color:var(--bronze);}
.nav-links{list-style:none;display:flex;}
.nav-links li{margin-left:2rem;}
.nav-links a{text-decoration:none;color:var(--off-white);transition:.3s;}
.nav-links a:hover{color:var(--bronze);}
.hamburger{display:none;cursor:pointer;flex-direction:column;gap:5px;}
.hamburger .bar{width:25px;height:3px;background:var(--off-white);border-radius:5px;}

/* Sections */
section{padding:120px 10% 80px;min-height:100vh;position:relative;display:flex;
  flex-direction:column;justify-content:center;overflow:hidden;}

.section-content {
  position: relative;
  z-index: 2;
  background: rgba(26, 20, 37, 0.5); /* fallback frosted tint */
  background-size: cover;             /* make images fill */
  background-position: center;
  background-repeat: no-repeat;
  padding: 2rem 3rem;
  border-radius: 15px;
  backdrop-filter: blur(10px);
  max-width: 900px;
  margin: 0 auto;
  overflow: hidden; /* keeps background tidy inside border */
}


h2{font-family:var(--heading-font);font-size:3rem;color:var(--bronze);text-align:center;margin-bottom:2rem;}
p,li{font-size:1.1rem;line-height:1.7;margin-bottom:1rem;}
.center-text{text-align:center;}

/* Welcome */
/* === Welcome hero redesign === */

.welcome-content{
  background: none;
  border: none;
  backdrop-filter: none;
  text-align: center;
  max-width: 960px;
}

.welcome-tagline{
  font-family: var(--heading-font);
  letter-spacing: .25em;
  text-transform: uppercase;
  font-size: 1rem;
  color: var(--off-white);
  opacity: 0;
  animation: fade-in .9s ease forwards;
  animation-delay: .1s;
}

.heading-large{
  font-family: var(--heading-font);
  font-size: clamp(2.4rem, 6vw, 5rem);
  line-height: 1.1;
  color: var(--off-white);
  margin: .5rem 0 0.8rem;
  opacity: 0;
  animation: fade-in-up 1s ease forwards;
}
.welcome-name:nth-of-type(1){ animation-delay: .5s; }
.welcome-name:nth-of-type(2){ animation-delay: 1.6s; }

.ampersand-row{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  margin: .25rem 0 .25rem;
}

.ampersand{
  font-family: var(--heading-font);
  font-size: clamp(2rem, 5vw, 3.2rem);
  color: var(--bronze);
  opacity: 0;
  animation: fade-in .8s ease forwards;
  animation-delay: 1.2s;
}

.line{
  --line-length: min(22vw, 220px);
  position: relative;
  height: 2px;
  width: var(--line-length);
  background-color: var(--bronze);
  opacity: 0;
  animation: fade-in .8s ease forwards;
  animation-delay: 1.2s;
}


.date-big{
  font-family: var(--heading-font);
  font-size: clamp(1.6rem, 4.5vw, 3rem);
  color: var(--off-white);
  margin-top: .25rem;
  opacity: 0;
  animation: fade-in .9s ease forwards;
  animation-delay: 2.5s;
}

.see-you{
  font-size: 1.05rem;
  color: var(--bronze);
  margin-top: .25rem;
  letter-spacing: .04em;
  opacity: 0;
  animation: fade-in .9s ease forwards;
  animation-delay: 3.2s;
}

/* Keyframes */
@keyframes fade-in{ to{ opacity:1 } }
@keyframes fade-in-up{ from{ opacity:0; transform: translateY(10px) } to{ opacity:1; transform:none } }


/* Motion safety */
@media (prefers-reduced-motion: reduce){
  .welcome-content *{
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}








/* Details */
.details-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center;}
.details-grid h3{font-family:var(--heading-font);color:var(--deep-orange);font-size:1.5rem;margin-bottom:.5rem;}
.map-container{width:100%;height:350px;border-radius:8px;overflow:hidden;border:2px solid var(--bronze);}
.map-container iframe{width:100%;height:100%;border:0;}

/* Buttons */
.btn{display:inline-block;background:var(--bronze);color:var(--dark-purple);padding:1rem 2.5rem;
  border-radius:50px;font-size:1.2rem;margin-top:2rem;text-decoration:none;
  transition:.3s;}
.btn:hover{background:var(--deep-orange);transform:translateY(-3px);}

/* Footer */
footer{text-align:center;padding:2rem;background:#111;background-image: url(stardust.png);}

/* Responsive */
@media(max-width:768px){
  .nav-links{display:none;flex-direction:column;position:absolute;top:100%;right:0;background:var(--dark-green);width:100%;text-align:center;}
  .nav-links.active{display:flex;}
  .nav-links li{margin:1rem 0;}
  .hamburger{display:flex;}
  h2{font-size:2.5rem;}
  #welcome h1{font-size:3rem;}
  .section-content{padding:1.5rem;}
  .details-grid{grid-template-columns:1fr;}
}

/* === Animated Double Gradient Borders (gradient moves, line stays still) ================================================================== */
/* Tunables (override per-section with inline styles on <section> or a class) */
:root{
  --outer-colors:#b08d57,#e4af5e,#b08d57;
  --inner-colors:#a68a61,#efc17a,#a68a61;;

  --outer-speed:5s;  /* 1 lap for colour flow */
  --inner-speed:4s;

  --outer-width:2px;  /* thicknesses */
  --inner-width:2px;
  --border-gap:8px;
}

/* Register animatable custom properties for angles */
@property --outer-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@property --inner-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.section-content.border-astro{
  position:relative;
  border:none;
  background-clip:padding-box;
}

.section-content.border-astro::before,
.section-content.border-astro::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
}

/* OUTER ring — colours circulate via changing the gradient's 'from' angle */
.section-content.border-astro::before{
  background:
    conic-gradient(from var(--outer-angle), var(--outer-colors));
  /* no transforms — the element does not rotate */
  animation: outer-flow var(--outer-speed) linear infinite;
  padding:var(--outer-width);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; /* Safari */
          mask-composite:exclude;
  opacity:.98;
}

/* INNER ring — inset by the gap, independent colours/speed */
.section-content.border-astro::after{
  background:
    conic-gradient(from var(--inner-angle), var(--inner-colors));
  animation: inner-flow var(--inner-speed) linear infinite;
  inset:var(--border-gap);
  padding:var(--inner-width);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  opacity:.98;
}

/* Animate only the gradient's start angle (the border stays static) */
@keyframes outer-flow { to { --outer-angle: 360deg; } }
@keyframes inner-flow { to { --inner-angle: 360deg; } }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .section-content.border-astro::before,
  .section-content.border-astro::after{ animation: none; }
}


/* Accommodation sub-headings & list */
#accommodation h3{
  font-family: var(--heading-font);
  font-weight: 400;               /* Amarante is 400 only */
  color: var(--deep-orange);
  font-size: 1.4rem;
  margin: 1.25rem 0 .5rem;
  text-align: left;
}
#accommodation .list{
  padding-left: 1.2rem;
  margin-bottom: 1rem;
}
#accommodation .list li{
  margin: .4rem 0;
  line-height: 1.7;
}
#accommodation .center-text{ margin-bottom: 1rem; }


/* === In-content link styles (excludes nav + .btn) === */
.section-content a:not(.btn){
  color: var(--deep-orange);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.22em;
  transition: color .25s ease, text-decoration-color .25s ease, outline-color .2s ease;
}

.section-content a:not(.btn):hover{
  color: var(--bronze);
  text-decoration-color: var(--bronze);
}

/* Accessible focus style */
.section-content a:not(.btn):focus-visible{
  outline: 2px solid color-mix(in oklab, var(--bronze) 70%, white);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Optional: visited links a touch dimmer (still accessible on dark) */
.section-content a:not(.btn):visited{
  color: color-mix(in oklab, var(--deep-orange) 80%, #aaa);
  text-decoration-color: currentColor;
}

/* === Fancy animated underline variant (opt-in) === */
.section-content a.link-fancy{
  text-decoration: none;
  background-image: linear-gradient(
    90deg,
    var(--deep-orange),
    var(--bronze),
    var(--off-white),
    var(--bronze),
    var(--deep-orange)
  );
  background-size: 200% 2px;      /* long gradient stripe */
  background-repeat: no-repeat;
  background-position: 0 100%;     /* underline position */
  padding-bottom: 2px;
  transition: background-position .5s ease, color .25s ease;
}

.section-content a.link-fancy:hover{
  background-position: 100% 100%;  /* slide the gradient */
  color: var(--off-white);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .section-content a.link-fancy{ transition: color .25s ease; }
}


/* ADD SOME STARS */

/* Global stars layer */
.twinkles{
  position: fixed;
  inset: 0;
  z-index: 1;          /* sit above page background but below content */
  pointer-events: none;
  overflow: hidden;
}

/* Tiny star dots + twinkle animation */
@keyframes twinkleStar { from{opacity:.25} to{opacity:1} }
.twinkles .star{
  position: absolute;
  width: 2px; height: 2px;
  background: radial-gradient(circle, #fff 0 60%, transparent 70%);
  border-radius: 50%;
  opacity: .8;
  animation: twinkleStar 2.5s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 2px rgba(255,255,255,.6));
}