/* SQUIGGLE STACKED EFFECT */
.squiggle_stacked {
	position: relative;
	display: inline;
}

.squiggle_stacked svg{
	position: absolute;
	left:0;
	pointer-events: none;
}

.squiggle_stacked .underline {
	position: absolute;
	pointer-events: none;
	left: 0;
	bottom: -35px;
	width: 100%;
	overflow: visible;
}
.squiggle_stacked .underline path {
	fill: none;
	stroke: rgb(249, 189, 34);
	stroke-width: 7;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation: draw 1s ease-out forwards;
}

/* BASIC UNDERLINE EFFECT */
.basic_underline {
	position: relative;
	display: inline;
}

.basic_underline svg{
	position: absolute;
	left:0;
	pointer-events: none;
}

.basic_underline .underline {
	position: absolute;
	pointer-events: none;
	left: 0;
	bottom: -35px;
	width: 100%;
	overflow: visible;
}
.basic_underline .underline path {
	fill: none;
	stroke: rgb(33, 62, 255);
	stroke-width: 10;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation: draw 1s ease-out forwards;
}

/* LOOSE CIRCLE EFFECT */

.circle-wrap 
{
	position: relative;
	
	display: inline-block;
	padding: 0 6px;
}

.scribble 
{
	position: absolute;
	pointer-events: none;
}

.scribble path 
{
	fill: none;
	stroke: #f9bd22;
	stroke-width: 18;
	stroke-linecap: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation: draw 1.2s ease-out forwards;
}

@keyframes draw {
	to {
		stroke-dashoffset: 0;
	}
}

/* SQUIGGLE UNDERLINE EFFECT */
.squiggle_underline {
	position: relative;
	display: inline;
}

.squiggle_underline svg{
	position: absolute;
	left:0;
	pointer-events: none;
}

.squiggle_underline .underline {
	position: absolute;
	pointer-events: none;
	left: 0;
	bottom: -25px;
	width: 100%;
	overflow: visible;
}
.squiggle_underline .underline path {
	fill: none;
	stroke: rgb(33, 62, 255);
	stroke-width: 12;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation: draw 1s ease-out forwards;
}

/* SKETCH UNDERLINE EFFECT */
.sketch_underline {
	position: relative;
	display: inline;
}

.sketch_underline svg{
	position: absolute;
	left:0;
	pointer-events: none;
}

.sketch_underline .underline {
	position: absolute;
	pointer-events: none;
	left: 0;
	bottom: -25px;
	width: 100%;
	overflow: visible;
}
.sketch_underline .underline path {
	fill: none;
	stroke: rgb(249, 189, 34);
	stroke-width: 8;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation: draw 1s ease-out forwards;
}

/* ROTATING WORDS EFFECT */
/* container inline que não quebra o texto */
.rotating-words {
	display: inline-flex;
	align-items: baseline;
	margin: 0 0.35em;
}

/* máscara animada */
.word-mask {
	display: inline-block;
	overflow: hidden;
	width: 0;
	transition: width 0.9s cubic-bezier(0.77, 0, 0.175, 1);
}

/* palavra real (nunca anima) */
.word {
	display: inline-block;
	white-space: nowrap;
}

/* SCROLL REVEAL EFFECT */
.reveal-line {
	font-size: 3rem;
	font-weight: 600;
	line-height: 1.3;
	margin: 150px 0;
	word-wrap: break-word;
}

.reveal-word {
	display: inline-block;
	margin-right: 0.25em;
	opacity: 0.25;
	transition: opacity 0.15s linear;
	will-change: opacity;
}

/* SCROLL TEXT EFFECT */
/* === Ticker Horizontal Normal === */
.horizontal-scroll-container {
	overflow: hidden;
	white-space: nowrap;
	width: 100%;
	padding: 1rem 0;
	border-top: 1px solid #444;
	border-bottom: 1px solid #444;
}

.horizontal-scroll {
	display: inline-block;
	white-space: nowrap;
}

.scroll-word {
	display: inline-block;
	margin-right: 3rem;
	font-size: 2rem;
	font-weight: 600;
}

@media (max-width: 768px) {
	.scroll-word {
		font-size: 1.5rem;
		margin-right: 2rem;
	}
}

/* === Botão com Texto Rolante (MENOR) === */
.scroll-button {
	position: relative;
	overflow: hidden;
	width: 200px;              /* ⬅️ menor */
	padding: 0.5rem 0.8rem;    /* ⬅️ menos padding */
	background: #ff6b6b;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	color: #fff;
	font-weight: 600;
	font-size: 0.9rem;         /* ⬅️ texto menor */
	display: flex;
	align-items: center;
}

.scroll-text {
	display: inline-block;
	white-space: nowrap;
	will-change: transform;
}

.scroll-button .scroll-word {
	margin-right: 1.5rem;
	font-size: 0.9rem;
}

  /* === HERO CONTIDO (NÃO FULL WIDTH) === */
/* === HERO SECTION === */
.hero-section {
  position: relative;
  width: 100%;
  margin: 4rem 0;
}

/* === IMAGEM CONTIDA === */
.hero-wrapper {
  display: flex;
  justify-content: center;
}

.hero {
  position: relative;
  width: 90%;
  max-width: 1100px;
  height: 420px;
  overflow: hidden;
  border-radius: 16px;
}

.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
}

/* === TICKER FULL WIDTH SOBRE A IMAGEM === */
.hero-ticker-container {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100vw;              /* ⬅️ ocupa TODO o ecrã */
  transform: translateY(-50%);
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
}

.hero-ticker {
  display: inline-flex;
  white-space: nowrap;
  will-change: transform;
  color:aqua;
}

.hero-ticker span {
  font-size: 3rem;
  font-weight: 700;
  margin-right: 4rem;
  color: #fff;
}

@media (max-width: 768px) {
  .hero {
    height: 280px;
  }

  .hero-ticker span {
    font-size: 1.6rem;
    margin-right: 2.5rem;
  }
}

/* === SCROLL DUPLO FINAL === */
.double-scroll {
  width: 100%;
  margin: 4rem 0;
}

.double-scroll-container {
  overflow: hidden;
  width: 100%;
  padding: 1rem 0;
  border-top: 1px solid #333;
}

.double-scroll-track {
  display: inline-flex;
  white-space: nowrap;
  will-change: transform;
}

.double-scroll-track span {
  font-size: 2rem;
  font-weight: 600;
  margin-right: 4rem;
  color: #fff;
}

@media (max-width: 768px) {
  .double-scroll-track span {
    font-size: 1.4rem;
    margin-right: 2.5rem;
  }
}

/* ANIMATED TITLE */
/* === TÍTULO COM EFEITO MARKER === */
.highlight-title {
	position: relative;
	display: inline-block;
	font-size: 3rem;
	font-weight: 700;
	line-height: 1.2;
	overflow: hidden;
}

.highlight-text {
	position: relative;
	z-index: 2;
	opacity: 0;
	transform: translateX(-30px);
	transition: opacity 0.4s ease, transform 0.4s ease;
	color: black;
}

.highlight-bg {
	position: absolute;
	left: 0;
	top: 55%;
	transform: translateY(-50%);
	height: 1.2em;
	width: 0;
	background: #ff711f;
	z-index: 1;
	transition: width 0.6s ease;
	border-radius: 4px;
}

.highlight-title.is-visible .highlight-bg {
	width: 100%;
}

.highlight-title.is-visible .highlight-text {
	opacity: 1;
	transform: translateX(0);
	transition-delay: 0.2s;
}

@media (max-width: 768px) {
	.highlight-title {
		font-size: 2rem;
	}
}

/* === HINGE TITLE === */
.hinge-wrapper {
	perspective: 1200px;
}

.hinge-title {
	position: relative;
	display: inline-block;
	font-size: 3rem;
	font-weight: 700;
	transform-origin: top left;
	transform: rotateX(65deg);
	opacity: 0;
	transition:
		transform 2.4s cubic-bezier(.12,.9,.25,1),
		opacity 0.6s ease;
}

.hinge-bg {
	position: absolute;
	inset: 0;
	background: #3452ff;
	z-index: 1;
	transform-origin: top left;
}

.hinge-text {
	position: relative;
	z-index: 2;
	color: white;
	padding: 0.2em 0.4em;
	display: inline-block;
}

.hinge-title.is-visible {
	transform: rotateX(0deg);
	opacity: 1;
	transition-delay: 0.15s;
}

@media (max-width: 768px) {
	.hinge-title {
		font-size: 2rem;
	}
}

/* GRADIENT TEXT EFFECT */
.gradient-text {
	font-size: 4rem;
	font-weight: bold;
	background: linear-gradient(to bottom right,#ffcf6d,#ff3939);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text; /* compatibilidade futura */
	color: transparent;
	text-align: center;
}

/* SPLIT LINE EFFECT */
.reveal-text {
  overflow: hidden;
}

.reveal-text .line {
  display: block;
  overflow: hidden;
  margin-bottom: 0.5em;
}

.reveal-text .line span {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px); /* aumenta ligeiramente o deslocamento para suavidade */
  transition:
    transform 1.5s cubic-bezier(0.22, 1, 0.36, 1), /* mais lento */
    opacity 1.5s ease-out;
transition-delay: calc(var(--i) * 0.05s);

}

.reveal-text .line.revealed span {
  opacity: 1;
  transform: translateY(0);
}

/* HIGHLIGHT TEXT EFFECT */
	/* Highlight completo */
	.highlight {
		background: #ff7530;
	}

	/* Half background (metade inferior) */
	.highlight-bottom {
		position: relative;
		font-weight: bold;
	}

	.highlight-bottom::after {
		content: '';
		position: absolute;
		left: 0;
		bottom: 0;        
		width: 100%;     
		height: 50%;        
		background: red;
		z-index: -1;       
		border-radius: 2px;
	}

	/* Half background (metade inferior) COM GRADIENT */
	.highlight-bottom-gradient {
		position: relative;
		font-weight: bold;
	}

	.highlight-bottom-gradient::after {
		content: '';
		position: absolute;
		left: 0;
		bottom: 0;        
		width: 100%;        
		height: 50%;        
		background: linear-gradient(to right, red, rgba(255, 235, 59, 0)); 
		z-index: -1;       
		border-radius: 2px; 
	}

	/* LINK HOVER EFFECT */
	a.link-hover {
		position: relative;
		color: #3452ff;
		text-decoration: underline;
		text-decoration-thickness: 2px;
		z-index: 0;
		transition: color 0.3s ease;
	}

	a.link-hover::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		width: 0%;
		background: #3452ff;
		z-index: -1;
		transition: width 0.4s ease;
	}

	a.link-hover:hover {
		color: #fff;
	}

	a.link-hover:hover::before {
		width: 100%;
	}