/* H41-R5 MAGIC landing: campaign storytelling built from accessible HTML and two supplied visuals. */
.magic-page{
  overflow-x:hidden;
  background:#f4f0e5;
}
.magic-page .top-status{
  background:#072f23;
}
.magic-page header{
  background:rgba(244,240,229,.94);
}
.magic-hero{
  position:relative;
  min-height:760px;
  overflow:hidden;
  background:
    radial-gradient(circle at 12% 18%,rgba(245,188,55,.18),transparent 25%),
    radial-gradient(circle at 92% 75%,rgba(252,251,247,.1),transparent 25%),
    linear-gradient(135deg,#082f23 0%,#0e4b36 55%,#123b2e 100%);
  color:var(--surface);
  isolation:isolate;
}
.magic-hero::before,
.magic-hero::after{
  content:"";
  position:absolute;
  z-index:-1;
  border:1px solid rgba(245,188,55,.2);
  border-radius:50%;
}
.magic-hero::before{
  width:520px;
  height:520px;
  top:-280px;
  left:-180px;
}
.magic-hero::after{
  width:720px;
  height:720px;
  right:-360px;
  bottom:-410px;
}
.magic-hero__grid{
  min-height:760px;
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(380px,.7fr);
  align-items:center;
  gap:clamp(36px,7vw,96px);
  padding:64px 0;
}
.magic-hero__copy{
  position:relative;
  z-index:2;
  min-width:0;
}
.magic-hero .eyebrow{
  color:rgba(252,251,247,.7);
}
.magic-hero h1{
  display:grid;
  justify-items:start;
  margin:17px 0 24px;
  font:500 clamp(3.4rem,7vw,6.7rem)/.86 var(--story);
  letter-spacing:-.065em;
}
.magic-title__line{
  display:block;
}
.magic-title__line--last{
  margin-top:.1em;
  color:#f2e6bf;
  font-style:italic;
  font-size:.7em;
  letter-spacing:-.045em;
}
.magic-title__word{
  display:flex;
  margin:.08em 0 .02em;
  color:#f4b936;
  font-family:var(--ui);
  font-size:1.08em;
  font-style:normal;
  font-weight:600;
  letter-spacing:-.09em;
  perspective:700px;
}
.magic-title__word>span{
  display:inline-block;
  transform-origin:50% 70%;
  animation:magic-title-letter 5.4s cubic-bezier(.2,.8,.2,1) infinite;
  animation-delay:calc(var(--magic-index) * 100ms);
}
@keyframes magic-title-letter{
  0%,9%{opacity:0;transform:translateY(.42em) rotateX(-75deg)}
  15%,76%{opacity:1;transform:translateY(0) rotateX(0)}
  83%,100%{opacity:0;transform:translateY(-.22em) rotateX(35deg)}
}
.magic-hero__lead{
  max-width:620px;
  margin:0;
  color:rgba(252,251,247,.82);
  font:400 clamp(1rem,1.7vw,1.22rem)/1.68 var(--story);
}
.magic-hero__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:18px;
  margin-top:28px;
}
.magic-btn{
  border-color:#f4c75b;
  background:#f4c75b;
  color:#082f23;
  box-shadow:0 12px 34px rgba(0,0,0,.18);
}
.magic-btn span{
  font-size:1.2rem;
  transition:transform .2s ease;
}
.magic-btn:hover span,
.magic-btn:focus-visible span{
  transform:translateX(4px);
}
.magic-text-link{
  padding:9px 0;
  border-bottom:1px solid rgba(252,251,247,.48);
  color:var(--surface);
  font-size:.82rem;
  font-weight:500;
}
.magic-hero__facts{
  display:flex;
  gap:0;
  margin:34px 0 0;
  padding:0;
  list-style:none;
}
.magic-hero__facts li{
  min-width:120px;
  display:grid;
  gap:1px;
  padding:0 20px;
  border-left:1px solid rgba(252,251,247,.22);
}
.magic-hero__facts li:first-child{
  padding-left:0;
  border-left:0;
}
.magic-hero__facts strong{
  color:#f4c75b;
  font:500 1rem var(--mono);
}
.magic-hero__facts span{
  color:rgba(252,251,247,.68);
  font-size:.69rem;
}
.magic-hero__visual{
  position:relative;
  width:min(100%,510px);
  justify-self:end;
  margin:0;
  animation:magic-visual-float 6s ease-in-out infinite;
}
.magic-hero__image-frame{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(252,251,247,.3);
  border-radius:32px;
  background:#0c432f;
  box-shadow:0 28px 80px rgba(0,0,0,.34);
  transform:rotate(1.4deg);
}
.magic-hero__image-frame::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  box-shadow:inset 0 0 0 7px rgba(252,251,247,.08);
  pointer-events:none;
}
.magic-hero__visual img{
  width:100%;
  height:auto;
  display:block;
}
.magic-hero__visual figcaption{
  position:absolute;
  right:-16px;
  bottom:34px;
  display:grid;
  padding:12px 16px;
  border:1px solid rgba(252,251,247,.25);
  border-radius:13px;
  background:rgba(7,47,35,.88);
  color:var(--surface);
  box-shadow:0 12px 30px rgba(0,0,0,.18);
  backdrop-filter:blur(12px);
}
.magic-hero__visual figcaption span{
  color:rgba(252,251,247,.68);
  font-size:.59rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.magic-hero__visual figcaption strong{
  font-size:.76rem;
}
@keyframes magic-visual-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}
.magic-orbit{
  position:absolute;
  z-index:1;
  display:grid;
  place-items:center;
  border:1px solid rgba(244,199,91,.3);
  border-radius:50%;
  color:rgba(244,199,91,.58);
  font:500 .58rem var(--mono);
  letter-spacing:.18em;
  animation:magic-orbit-spin 18s linear infinite;
}
.magic-orbit--one{
  width:128px;
  height:128px;
  top:58px;
  right:42%;
}
.magic-orbit--two{
  width:92px;
  height:92px;
  right:4vw;
  bottom:52px;
  animation-direction:reverse;
  animation-duration:14s;
}
@keyframes magic-orbit-spin{
  to{transform:rotate(360deg)}
}
.magic-marquee{
  overflow:hidden;
  border-block:1px solid rgba(8,47,35,.15);
  background:#f4c75b;
  color:#082f23;
}
.magic-marquee>div{
  width:max-content;
  display:flex;
  align-items:center;
  gap:26px;
  min-height:54px;
  padding-inline:13px;
  font:600 .78rem var(--mono);
  letter-spacing:.14em;
  animation:magic-marquee-move 20s linear infinite;
}
.magic-marquee i{
  font-style:normal;
  opacity:.45;
}
@keyframes magic-marquee-move{
  to{transform:translateX(-50%)}
}
.magic-path{
  background:#f4f0e5;
}
.magic-section-heading{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,.58fr);
  align-items:end;
  gap:50px;
  margin-bottom:30px;
}
.magic-section-heading h2,
.magic-gift__copy h2,
.magic-invitation h2{
  margin:8px 0 0;
  color:var(--forest);
  font:500 clamp(2.1rem,5vw,4.2rem)/1.02 var(--story);
  letter-spacing:-.045em;
}
.magic-section-heading>p{
  margin:0;
  color:var(--stone);
  font:400 1rem/1.72 var(--story);
}
.magic-path__grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:1px;
  margin:0;
  padding:1px;
  background:rgba(8,47,35,.15);
  list-style:none;
}
.magic-path__grid li{
  min-width:0;
  min-height:285px;
  display:flex;
  flex-direction:column;
  padding:24px 20px;
  background:#fbf8ef;
  transition:background .25s ease,color .25s ease,transform .25s ease;
}
.magic-path__grid li:hover{
  z-index:1;
  background:#0e4b36;
  color:var(--surface);
  transform:translateY(-6px);
}
.magic-path__grid b{
  color:#d79219;
  font:600 clamp(3.6rem,7vw,6.2rem)/.9 var(--ui);
  letter-spacing:-.08em;
}
.magic-path__grid span{
  margin-top:auto;
  color:var(--forest);
  font:500 1.2rem var(--story);
}
.magic-path__grid p{
  margin:7px 0 0;
  color:var(--stone);
  font-size:.76rem;
  line-height:1.55;
}
.magic-path__grid li:hover span,
.magic-path__grid li:hover p{
  color:inherit;
}
.magic-gift{
  background:#dfe9ec;
}
.magic-gift__grid{
  display:grid;
  grid-template-columns:minmax(360px,.8fr) minmax(0,1fr);
  align-items:center;
  gap:clamp(40px,8vw,110px);
}
.magic-gift__visual{
  position:relative;
  margin:0;
}
.magic-gift__visual img{
  width:100%;
  height:auto;
  display:block;
  border-radius:26px;
  box-shadow:0 28px 65px rgba(20,54,51,.18);
}
.magic-gift__seal{
  position:absolute;
  right:-42px;
  top:34px;
  width:112px;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  padding:16px;
  border-radius:50%;
  background:#f4b936;
  color:#082f23;
  text-align:center;
  font:600 .68rem/1.45 var(--mono);
  letter-spacing:.05em;
  box-shadow:0 15px 34px rgba(8,47,35,.16);
  animation:magic-seal-pulse 2.8s ease-in-out infinite;
}
@keyframes magic-seal-pulse{
  0%,100%{transform:rotate(5deg) scale(1)}
  50%{transform:rotate(-2deg) scale(1.04)}
}
.magic-gift__copy{
  min-width:0;
}
.magic-gift__copy h2{
  max-width:650px;
}
.magic-gift__lead{
  max-width:620px;
  margin:20px 0 0;
  color:#455e5a;
  font:400 1.05rem/1.75 var(--story);
}
.magic-gift__items{
  display:grid;
  gap:1px;
  margin:27px 0 16px;
  background:rgba(8,47,35,.14);
}
.magic-gift__items article{
  display:grid;
  grid-template-columns:54px minmax(0,1fr);
  gap:18px;
  padding:18px 0;
  background:#dfe9ec;
}
.magic-gift__items strong{
  color:#bd7b0d;
  font:500 1rem var(--mono);
}
.magic-gift__items h3,
.magic-gift__items p{
  margin:0;
}
.magic-gift__items h3{
  color:var(--forest);
  font:500 1.1rem var(--story);
}
.magic-gift__items p{
  margin-top:4px;
  color:#536b66;
  font-size:.78rem;
}
.magic-gift__note{
  margin:0 0 22px;
  color:#536b66;
  font-size:.7rem;
}
.magic-btn--gold{
  background:#f2ad26;
}
.magic-invitation{
  background:#f4f0e5;
}
.magic-invitation__card{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,.72fr);
  align-items:end;
  gap:70px;
  padding:clamp(30px,6vw,72px);
  border-radius:26px;
  background:
    radial-gradient(circle at 90% 10%,rgba(244,199,91,.2),transparent 28%),
    #0b3c2d;
  color:var(--surface);
  box-shadow:0 24px 65px rgba(8,47,35,.16);
}
.magic-invitation .eyebrow{
  color:#f4c75b;
}
.magic-invitation h2{
  color:var(--surface);
}
.magic-invitation__card>div:last-child>p{
  margin:0 0 22px;
  color:rgba(252,251,247,.72);
  font:400 1rem/1.7 var(--story);
}
.magic-invitation__actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.magic-invitation__login{
  border-color:rgba(252,251,247,.4);
  background:transparent;
  color:var(--surface);
}

@media(max-width:980px){
  .magic-hero__grid{
    grid-template-columns:minmax(0,1fr) minmax(320px,.72fr);
    gap:34px;
  }
  .magic-path__grid{
    grid-template-columns:repeat(5,minmax(0,1fr));
  }
  .magic-path__grid li{
    min-height:245px;
    padding:18px 14px;
  }
  .magic-gift__seal{
    right:-18px;
  }
}

@media(max-width:820px){
  .magic-page{
    padding-bottom:74px;
  }
  .magic-hero,
  .magic-hero__grid{
    min-height:0;
  }
  .magic-hero__grid{
    grid-template-columns:1fr;
    gap:36px;
    padding:52px 0 58px;
  }
  .magic-hero h1{
    font-size:clamp(3.6rem,17vw,6.1rem);
  }
  .magic-hero__visual{
    width:min(100%,560px);
    justify-self:center;
  }
  .magic-hero__facts{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .magic-hero__facts li{
    min-width:0;
    padding-inline:12px;
  }
  .magic-orbit--one{
    top:45%;
    right:-35px;
  }
  .magic-orbit--two{
    display:none;
  }
  .magic-section-heading,
  .magic-gift__grid,
  .magic-invitation__card{
    grid-template-columns:1fr;
  }
  .magic-section-heading{
    gap:16px;
  }
  .magic-path__grid{
    grid-template-columns:repeat(5,minmax(0,1fr));
  }
  .magic-path__grid li{
    min-height:180px;
    padding:15px 8px;
  }
  .magic-path__grid b{
    font-size:clamp(2.7rem,10vw,4.8rem);
  }
  .magic-path__grid span{
    font-size:.86rem;
  }
  .magic-path__grid p{
    display:none;
  }
  .magic-gift__grid{
    width:min(calc(100% - 32px),680px);
  }
  .magic-gift__visual{
    width:min(100%,540px);
    justify-self:center;
  }
  .magic-gift__copy{
    padding-top:8px;
  }
  .magic-gift__seal{
    right:-9px;
    top:22px;
    width:92px;
    padding:12px;
    font-size:.57rem;
  }
  .magic-invitation__card{
    gap:28px;
  }
}

@media(max-width:520px){
  .magic-hero__grid{
    padding-top:38px;
  }
  .magic-hero__actions,
  .magic-invitation__actions{
    display:grid;
  }
  .magic-hero__actions .btn,
  .magic-invitation__actions .btn{
    width:100%;
  }
  .magic-text-link{
    justify-self:start;
  }
  .magic-hero__facts li{
    padding-inline:8px;
  }
  .magic-hero__facts span{
    font-size:.6rem;
    line-height:1.35;
  }
  .magic-hero__visual figcaption{
    right:8px;
    bottom:18px;
  }
  .magic-path__grid{
    gap:4px;
    padding:0;
    background:transparent;
  }
  .magic-path__grid li{
    min-height:128px;
    padding:12px 3px;
    border:1px solid rgba(8,47,35,.12);
    border-radius:11px;
    text-align:center;
  }
  .magic-path__grid b{
    font-size:clamp(2.2rem,12vw,3.25rem);
  }
  .magic-path__grid span{
    margin:auto 0 0;
    font-size:clamp(.58rem,2.8vw,.72rem);
  }
  .magic-gift__items article{
    grid-template-columns:42px minmax(0,1fr);
    gap:12px;
  }
}

@media(prefers-reduced-motion:reduce){
  .magic-title__word>span,
  .magic-hero__visual,
  .magic-orbit,
  .magic-marquee>div,
  .magic-gift__seal{
    animation:none;
  }
  .magic-title__word>span{
    opacity:1;
    transform:none;
  }
  .magic-path__grid li{
    transition:none;
  }
}